Sortable: Question: Styling the dragged / floating element

[jlehman]

Is it possible to style in some custom way the actual element that is being dragged around and follows the mouse cursor. This would be different than the actual LI element that gets moved up and down the list as you drag (which is handled with the ghost class). I'm referring to the actual floating element that appears to be a slightly ghosted copy of the LI element which follows the mouse/touch movement.

Thanks. This library is fantastic!

[raulghm]

+1

[jlehman]

Based on what I've read this may actually not be possible with HTML5 draggable elements. The dataTransfer element does support an "image" but doesn't do well using a styled HTML node in place of the image. Lots of oddities.

One approach could be to allow for copy of the dragged element to be placed at the X/Y position of the mouse and follow the mouse around. This would, of course, be outside the realm of HTML5 draggable building custom "stuff" on top of it. May not be advisable.

[voidale]

+1

[Onthrax]

It is possible for certain situations.

http://www.kryogenix.org/code/browser/custom-drag-image.html

[ChiefORZ]

It is possible with the forceFallback option in the dev Branch.

Take a look at the example at https://github.com/RubaXa/Sortable/tree/dev#forcefallback-option

PS: the example doesn't work, cause it is using the master branch of Sortable, where this option is not yet published.

[adamayres]

+1 to add an explicit hook for this.

As a workaround you can use setData to attach a class and then onEnd to remove it. You need to be careful when applying styles to the new class since both the element in the list and the draggable element will have the new class. You can workaround this adding more specific styles for the item in the list which will have the sortable-ghost class.

http://plnkr.co/edit/tCHVglRfTDyk1iVOy6Nh?p=preview

var el = document.getElementById('items');
var sortable = new Sortable(el, {
  setData: function (dataTransfer, el) {
    el.className = 'dragging';
  },
  onEnd: function (evt) {
    evt.item.className = '';
  }
});

/*
  Any overlapping styles with the '.dragging' element 
  need to have a stronger selector for the '.sortable-ghost'.
  In this example 121 vs 111.
*/
#items li, #items li.dragging.sortable-ghost {
  background: #FFFFE0;
  width: 100px;
  border: 1px solid #ccc;
}

#items li.dragging.sortable-ghost {
  background: #F5F5F5;
}

#items li.dragging {
   background: #FFC0CB;
   width: 150px;
   border: 2px solid #FF0000;
}

[ChiefORZ]

As i said, there is a specific hook fot this... I requested it myself.

You have to use the dev Branch, because it is not yet released.

Take a look at: http://jsbin.com/mefunemefe/1/edit?html,css,js,output
When you drag an item, the dragged/floating item gets an border-radius. You are in full control.

[Nesvet]

+1

[loktar00]

+1 and a :+1:

[RubaXa]

Certainly it is possible do, but in the a result instead the easy and fast library, we obtain another jQuery UI / Sortable.

Now the is already made fallback for touch-devices, because of what the have to support the two mechanisms.

[mrcanon]

The {forceFallback: true, fallbackClass: "dragged-item"} option in the example (http://jsbin.com/mefunemefe/1/edit?html,css,js,output) that's not good for the table

[courtyenn]

@ChiefORZ In your JSBin, the dragged/floating item cannot have opacity: 1. It is still semi-transparent for some reason?

[joelAppslabs]

@courtneynguyen with {forceFallback: true, fallbackClass: "dragged-item"} and add !important in opacity 1 of 'dragged-item' class works perfectly!