mikeplate / jquery-drag-drop-plugin Goto Github PK

Right now, a draggable element is dragged as soon as it is touched. A great option would be to specify a time for which the element needs to be touched before the dragging starts. Thereby, a normal scroll is still possible when touching draggable elements.

Solution:

• in onStart() and onMove() for mouse-drag, use clientX/Y instead of pageX/Y
• in onMove() use $.elementFromPoint(posX, posY), i.e. don't subtract any scrollLeft/Top
• use $.elementFromPoint from http://www.zehnet.de/2010/11/19/document-elementfrompoint-a-jquery-solution/

(only tested in FF 22, Safari 6.0.5, and iOS 6.1)

Unless I'm wrong you specifically mean the class of the element, not the stylesheet name, right?

It would be useful if this plugin supported reordering of elements by drag and drop, like li-elements in an ul/ol container or tr-elements in a table container. Such a use case is probably not supported right now since the plugin more or less assumes that the draggable elements and the droppable area are separate. In either case, create an example for reordering elements and update the plugin to support that use case, if necessary.

Is this implemented or would it be very easily hackable? Working on implementing this now, but don't see anything in the docs about a drag handle, just the entire thing is draggable.

From docs:

canDrag can be a callback function that returns true or false.

But if you look either into the code of plugin or into the code of first example you'll see that canDrag has to return false or jQuery element

Drag or drop do not work for elements inserted dynamically on the page.

Love the simplicity and felxibility of your plugin but I'm having an issue with drops.

The source-related CSS and functions work as expected but the drop-related do not; that is, the CSS class never appears and I don't see the alert message, including if I add a canDrop callback.

Using latest versions of Chrome and Firefox on OSX 10.6

<ul class="unstyled draggable">
  <li id="opt_qu_0" class="">comments</li>
  <li id="opt_qu_1" class="">Name</li>
  <li id="opt_qu_2" class="">jobTitle</li>
  <li id="opt_qu_3" class="">phone</li>
</ul>

<ul class="unstyled drop" id="idOrderingList">
  <li id="inc_qu_0" class="">Ultimate Question</li>
  <li id="inc_qu_1" class="">Email</li>
  <li id="inc_qu_2" class="">product1</li>
</ul>

$(function () {
  $('.draggable').dragdrop({
    sourceHide: true,
    dragClass: "whileDragging",
    canDropClass: 'hilightDropped',
    dropClass: 'hilightDropped',
    didDrop: function($src, $dst) {
      alert('dropped '+$src.text());
    }
  });
});

The didDrop callback doesn't "take care of all operations and effects to occur after a successful drag and drop has been performed."

Rather, all didDrop is expected to do is replace appending the source element to the destination element. All other actions are always performed, including:

• dropClass removed from the destination and canDropClass is removed from the active element (the thing you drag).
• If makeClone is true, the active element is removed from the document and the sourceClass is removed from the source (or visibility restored).
• If makeClone is false, the position of the active element (which is actually the source element) is set to static, height and width cleared and the dragClass removed.

Either the documentation should be updated or didDrop changed to prevent all of the above. Maybe with the ability to call an internal method that does the above or return a flag (false?) to indicate that it didn't do everything.

I will probably work on a patch to take the second approach (fix didDrop), unless someone speaks up here and suggests otherwise. :)

The plugin assumes that every draggable element is a single element with no children. This should not be the case. It should have a way to recognize that a touched element might be part of a container and that the container should be dragged instead of the touched element.

Any ideas how to fix that?