Search code examples
javascriptdragula

Dragula: how to make the object follow the cursor

I am using Dragula and I am trying to make the object I am dragging follow my cursor. How would I go about doing this.

EDIT: Maybe it is worth noting what the html here looks like:

<div>
  <paper-menu id="listL">
     <template id="left" is="dom-repeat" items="{{leftList}}">
       <div>
         <custom-polymer-element></custom-polymer-element>
       </div>
     </template>
  <paper-menu>
<div>

I initialize dragula by calling the ready function inside of Polymer:

Polymer({
  is:"wapper-element",
  ready: function() {
    var drake = dragula([this.$.listL]), {
      revertOnSpill: true,
    });
});

EDIT2:
Here is an image of what I see when I try to drag something:

enter image description here

What is in the bottom left is what I see every time, when I am dragging an image, and it stays there, regardless of where I drag the element. There is no element there or anything, the text just appears there.

EDIT3:

Solution:

The cause of the problem was that I was not importing dragula.css correctly. If anyone else encounters this problem I would recommend ensuring you have imported dragula.css and done so correctly.

Solution

  • I don't think you can do this. The best you can do with simple config is using:

    removeOnSpill: true

    This will remove the element being dragged from the container when it leaves the container it is over.

    Fiddle: http://jsfiddle.net/AtheistP3ace/e95nqyf9/1/

    I am not even sure you can fake it using events like setting display: none when dragging starts on that element because the mirror is a clone so whatever styling you apply to one is mirrored on the other.

    Fiddle: http://jsfiddle.net/AtheistP3ace/e95nqyf9/

    Essentially at the end of the day what is following your cursor is the original element in some ways, just a clone of it.