johnny / jquery-sortable

A flexible, opinionated sorting plugin for jQuery
http://johnny.github.io/jquery-sortable/
Other
1.52k stars 441 forks source link

Can't get the dragged item follow the mouse position while dragging #210

Open ppazos opened 8 years ago

ppazos commented 8 years ago

Here https://johnny.github.io/jquery-sortable/#docs all examples show the dragged LI following the mouse while dragging. I'm trying to use the code for the "Connected lists with drop animation" example to get my items follow the mouse but it doesn't work.

The weird thing is that I see the item while dragging on all your examples, but the only one that has code to do that is the one mentioned above. So that behavior might be implemented somewhere else.

Can you tell me how to show the dragged item while dragging? (this is a requirement on the apps I'm building). Thanks!

BTW, my container is a div, and my draggable items are also divs.

vicmosin commented 8 years ago

I had exactly the same problem, solved it by overriding onDrag method:

...
onDrag: function ($item, position, _super, event) {
      position.left = 0;
      position.top -= 55;
      $item.css(position)
},
...

but not sure how good the solution is...

P.S. In the example above I set left value to 0, so you can drag'n'drop only on Y-axis P.P.S. Just realized that I forgot to add the following classes. Once it's done, it works fine even with divs:

.dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
}

ol.example li.placeholder {
  position: relative;
  /** More li styles **/
}
ol.example li.placeholder:before {
  position: absolute;
  /** Define arrowhead **/
}