the trouble with two different style lists

[Adhders]

Expected Solution

In the official example（https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/two-lists.vue）,the list one’s style is the same as the list two’ style. In my project, the lists’s style are different, so when I drag the element from list one to list two, the content which I dragged will display on the list two( I mark the content with black circle ), it’s very ugly! How can I avoid the content of element showing on the list two , when i drag the element from list one to list two and the list one shoud keep unchanged during dragging?

[keeev]

I'm not sure what exactly you're trying to achieve since your explanation seems a bit ambiguous with things that should change but also not change.

• Are you having problems with the preview of where the element will be dropped?
• Or do you want the dropped event to be styled like in list 2 (full-width instead of a rectangle and horizontally)?

It's always easier to see what you're trying to do with your current code.

[Adhders]

I'm not sure what exactly you're trying to achieve since your explanation seems a bit ambiguous with things that should change but also not change.

• Are you having problems with the preview of where the element will be dropped?
• Or do you want the dropped event to be styled like in list 2 (full-width instead of a rectangle and horizontally)?

It's always easier to see what you're trying to do with your current code.

thanks for your reply, I want the dropped event to be styled like in list 2 (full-width instead of a rectangle and horizontally) during dragging (similar to the picture)

[keeev]

Ah, I see.

Besides adding a regular class to draggable you're probably looking for the ghost-class which lets you at least style the element you drag and also applies the styling to where it's being dropped (in your case this could be the dashed section on top of the screen):

<draggable
        .
        .
        .
        ghost-class="ghost"
        class="..."
      >
</draggable>

while ghost becomes a regular class you can style via CSS.

I can't try it at the moment since I have dynamically generated columns but if it's just those two like in the screen you could try to apply a ghost class for each list and see which ghost class applies when you drag between them.

[Adhders]

Ah, I see.

Besides adding a regular class to draggable you're probably looking for the ghost-class which lets you at least style the element you drag and also applies the styling to where it's being dropped (in your case this could be the dashed section on top of the screen):

<draggable
        .
        .
        .
        ghost-class="ghost"
        class="..."
      >
</draggable>

while ghost becomes a regular class you can style via CSS.

I can't try it at the moment since I have dynamically generated columns but if it's just those two like in the screen you could try to apply a ghost class for each list and see which ghost class applies when you drag between them.

I have tried the ghost-class before。 The ghost-class can‘t change the content where the dragged element is being dropped, just change the styling where the dragged element is being dropped. I don't know how to add some message like "please drop here!" to where he dragged element is being dropped

[Adhders]

Ah, I see. Besides adding a regular class to draggable you're probably looking for the ghost-class which lets you at least style the element you drag and also applies the styling to where it's being dropped (in your case this could be the dashed section on top of the screen):

<draggable
        .
        .
        .
        ghost-class="ghost"
        class="..."
      >
</draggable>

while ghost becomes a regular class you can style via CSS. I can't try it at the moment since I have dynamically generated columns but if it's just those two like in the screen you could try to apply a ghost class for each list and see which ghost class applies when you drag between them.

I have tried the ghost-class before。 The ghost-class can‘t change the content where the dragged element is being dropped, just change the styling where the dragged element is being dropped. I don't know how to add some message like "please drop here!" to where he dragged element is being dropped

keeev , very thanks to you, I have solved this trouble via CSS.

<template>
    <el-col :span="8">
        <div class="message">please drop here!</div>
        <div>
            <i :class="item.class"></i>
            <label>{{item.name}}</label>
        </div>
    </el-col>
</template>

<script>
    export default {
        props: ['item']
    }
</script>

<style scoped>
    .message{
        display:none;
    }
     .ghost{
        width:100%;
        height:20px !important;
        background-color: #FFE5CD !important
    }
    .ghost .message{
        display:block !important;
    }
    .ghost label,.ghost i{
       display:none !important;
    }

</style>

[keeev]

Ahhh nice, glad it worked out and I could help in a way. You‘re welcome. Your code also helped me with an idea I had in mind. 🙌🏼

Another idea I had today how elements could be styled, guess thats possible with the HTML Element that comes back via the event object.

[Adhders]

Ahhh nice, glad it worked out and I could help in a way. You‘re welcome. Your code also helped me with an idea I had in mind. 🙌🏼

Another idea I had today how elements could be styled, guess thats possible with the HTML Element that comes back via the event object.

ok, I will try this idea later. I have anthoer question maybe you can help.

I want modify the styling of content under mouse during dragging. the result I want like this( the content under mouse encircled by circle, the content which dragged from encircled by squre)

now, my code shows like that

The content under mouse is the same with the the content which dragged from. How can I modify the style of content under mouse(enclosed by circle in the screen) and keep the content (enclosed by squre in the screen) unchanged?

[jingyuLin1999]

Maybe this can solve your problem.

    .base-component-item {
        width: 100%;
        display: inline-block;
        text-indent: -9999px;
    }

versiton: "vuedraggable": "^2.24.3",

[Adhders]

Maybe this can solve your problem.

    .base-component-item {
        width: 100%;
        display: inline-block;
        text-indent: -9999px;
    }

versiton: "vuedraggable": "^2.24.3",

你好，请问base-component-item这个类哪来的，我试了，把这几行放到public.css中，不行啊

[jingyuLin1999]

非常抱歉，我不知道有没有误解你的意思。

我的做法是左侧基础字段加个类，当拖拽到画布时，直接对这个类进行控制。如拖拽到画布的ghost线

    <div class="base-widgets">
            <div class="widget-title">基础字段</div>
            <draggable
              tag="div"
              v-bind="dragOptions()"
              v-model="widgetsMeta"
              :clone="cloneDragField"
              class="base-components"
            >
              <span
                v-for="(widgetItem, index) in widgetsMeta"
                :key="index"
                class="base-component-item"
                >{{ widgetItem.title }}</span
              >
            </draggable>
          </div>