The example html page provided with your code doesn't provide for a situation where this can occur but there is a fundamental flaw in the code: The dragEnd callback only fires when the item being dragged has it's order changed (either within it's own list, or within the new list that it is being dragged to).
 
The documentation says: "dragEnd: The callback function that will be called after the dragging has ended."
 
Unforunately this is not true. If you want to see a situation where it doesn't work that way, setup a page where there are is a master list containing a couple draggable item's in it, and then a couple of other empty lists that can be dragged to/from, but which don't have any items in them to begin with. Setup the dragEnd callback to show an alert so that you know when it's being fired. Drag one of the items from the master list to one of the empty lists, notice the callback fires. Now drag that same item from the new list that it's a child of, to another one of the empty lists. Notice the callback doesn't fire, even though the item was moved!
 
The bug occurs because the dropEnd callback is only set to fire when one or more of the items has it's order changed within a list. The callback should always fire if an item is dragged from one destination to another, regardless of whether the order changes. Otherwise, if you only have a few items and a bunch of possible destinations, the dropEnd callback won't get fired when expected (if at all).
 
I patched the code so that it functions in the way I desired and I have attached the patch here. Thanks for the script, let me know if anyone has any questions.

Attachments

jquery.dragsort-0.4.3_patched.js

This work item was migrated from CodePlex

CodePlex work item ID: '31969'
Vote count: '1'

Using the attached example, click the dots on list item #4 and drag upwards.
 
Notice how the placeholder only moves once the user's mouse is over the location of items 3, 2 & 1, even though the top of item #4 is already sitting over them.

Attachments

dragsort-0.4.3_test-pos.zip

This work item was migrated from CodePlex

CodePlex work item ID: '31291'
Vote count: '1'

When using more than one list in the selector, with or without dragBetween set to true, data-listidx will be assigned to the UL elements used in the selector and not the child LI elements, leaving no way of saving the list order.

Attachments

example.php

This work item was migrated from CodePlex

CodePlex work item ID: '33582'
Vote count: '1'

I am using jQuery List DragSort program and one of the layer of my program contain google chart.
 
It lost google chart display when we drag google chart layer form one position to another in mozilla firefox browser only.
 
 
Pleaes help me...

This work item was migrated from CodePlex

CodePlex work item ID: '28446'
Vote count: '1'

When multiple containers, placeholderItem can be inserted into all containers, each time dragging . So can we only insert the placeholderItem into the target container?
that's my proplem.thanks.

This work item was migrated from CodePlex

CodePlex work item ID: '35205'
Vote count: '1'

When the last row contains only one item, dragging is not available to the last row (dragsort 4.3)

This work item was migrated from CodePlex

CodePlex work item ID: '32171'
Vote count: '1'

i have div area contains some modules width div element, i want to drag and drop each module to iframe html ,

This work item was migrated from CodePlex

CodePlex work item ID: '35206'
Vote count: '1'

Using div.dragdrop will allow the dragging of the selected item but the items will not swap places and the list will not be reordered. Using div alone will work.

This work item was migrated from CodePlex

CodePlex work item ID: '35207'
Vote count: '1'

When we stylize the "dragselector" to be "outside" (margin-left: -30px) of the sortable element,
the swapping between elements don't work if the mouse stay on the dragSelector, work only if the mouse "shift" during the drag to any position "internal" at the sortable element.
 
I read that you solved the "padding" issue, i think this margin one is quite the same

This work item was migrated from CodePlex

CodePlex work item ID: '32484'
Vote count: '1'

The table code currently doesn't allow a block at the top of the sortable rows - you can fix this with the following code at line 22:

if( $(cont).is("table") && $(cont).children('tbody').size() === 1 )
cont = $(cont).children('tbody').get(0);

This work item was migrated from CodePlex

CodePlex work item ID: '33956'
Vote count: '1'

When the last row contains only one item, dragging is not available to the last row (dragsort 4.3) and

This work item was migrated from CodePlex

CodePlex work item ID: '32170'
Vote count: '1'

Similar to patch: 12014 - BUT with some additional changes (see attached diff) and without allowing configuration of tolerance (I prefer allowing configuration)
 
I don't know if this fixes all of the issues with the above mentioned patch, but simply adding tolerance will cause some behavior problems.
 
This diff also tracks:

currentTarget - the target over which the drag started. This avoids the drift problem introduced by adding tolerance due to the current code relying on '$(e.target).closest'.
 
startX & startY - stores and calculates the distance the mouse has moved and only triggers drag start when the tolerance has been exceeded.
 
dragStart - modified to use currentTarget rather than closest target to avoid the drift issue.
 
I don't know if this diff fixes all remaining issues, but these were the ones I had encountered during my testing.

Attachments

jquery.dragsort.diff

This work item was migrated from CodePlex

CodePlex work item ID: '32717'
Vote count: '1'

P:S. Is here a way to send request to server only when some items really reordered, not by click only on item ?

Attachments

jquery.dragsort.zip

This work item was migrated from CodePlex

CodePlex work item ID: '27382'
Vote count: '2'

Hi, I believe that I have found a problem with the scrolling code.
 
For example, use this url on my development box: http://slideshowmaker.ath.cx/index.htm :
 
If you drag one of the first few slides past the area so that the slider pane scrolls, then you grab one of the last items and try to move it left, you will see that the "selected" item gets drawn many pixels left of where the mouse really is. It seems to lose track of the correct offset because its not taking into account the scrollContainer's scolled position.
 
I figured the scrollContainer's selector should be '.slides-wrapper .slider-pane' if I understood the docs but seems '.slider-pane .slider-timeline' works better (actually will scroll).
 
Or am I missing something?
 
Thanks

This work item was migrated from CodePlex

CodePlex work item ID: '33163'
Vote count: '1'

Am implementing dragsort with a server-side ajax command to "save" the changed order of my list to my database.
 
IF this fails, I need to be able to return false from dragEnd to make the UI "revert" back to the original state.
 
I think this behaviour should be standard from within DragSort rather than writing it myself (quick solution = reload page, longer solution = do it dynamically in jQuery).
 
DragSort naturally fits with ajax server updates, so your plugin should be very friendly for this.

This work item was migrated from CodePlex

CodePlex work item ID: '26326'
Vote count: '2'

I use UI.Layout plugin to layout the page (top header, left menu, rest content). When I use the List DragSort for a list inside a UI.Layout content pane, the dragged item is bad positioned. It has an offset equal to the top left position of the UI.Layout pane. I'm testing with IE7, jquery 1.3.2, dragsort 0.3, ui.layout 1.2.0.
 
I have examined the plugin code, and I think the problem is caused because the list.draggedItem is positioned absolute inside a div already positioned absolute. The top, left css styles are not relative to the document, but to the parent absolute div. The offset() function is not 100% compatible with css({top:y,left:x}) when ancestor absolute divs are in play.
 
I have found a solution for me: substract the position of the absolute containers. My patch is adding this piece of code just before the last statement of the setPos function:
 
this.draggedItem.parents().each(function(){
if (this.style.position == "absolute") {
var offset = $(this).offset();
top -= offset.top;
left -= offset.left;
}

});

This work item was migrated from CodePlex

CodePlex work item ID: '24530'
Vote count: '3'

The most recent version (at this time), 0.5.2, is not compatible with jQuery version 3.

It will work perfectly well with jQuery 2.2.4 (the most recent 2.x version at this time).

With version 3.x the following error occurs:
jQuery.Deferred exception: e(...).children(...).size is not a function TypeError: e(...).children(...).size is not a function
and
Uncaught TypeError: e(...).children(...).size is not a function

Thank you for the great plugin. It is very useful and I love it, but I just wanted to make users aware that this is the cause of the error.

Attachments

drag_drop_screen_shot.jpg

This work item was migrated from CodePlex

CodePlex work item ID: '35208'
Vote count: '1'

code: if (b(this).css("position") != "static" && (!b.browser.mozilla || b(this).css("display") != "table")) {
api :$.browser has been removed.
If your parent element has "position=relative", You'll find bugs.

I have 2 lists w/a fixed height. I noticed when you drag from list 1 to 2 and release the mouse button when over list 2, but you are not over list item, then the move does not take. Unless you have moused over an item from list 2, the drop does not work the way you'd expect.

To fix the problem, I added a patch to the source code that checks when dragging between lists and if you're dropping to a list and the list.placeHolderItem object isn't in the current list, it'll move the item to the dropped list container.

This allows you to have a fixed height on your elements and drop the elements. This should also resolve issues where an "empty" element can be hard to drop to. This should also fix issues where there is margin/whitespace between the items.

I'm attaching my patch.

Attachments

dragsort_fix_contain_issue.patch

This work item was migrated from CodePlex

CodePlex work item ID: '33749'
Vote count: '1'

Hi, I have a dashboard widget that is draggable nicely with List DragSort, however inside that

Expected behavior (works in FF, not in IE):

Mouse-over: hand/pointer cursor
Move: move cursor
Drop: hand/pointer

Mouse-out: no specified cursor (reacts with other elements naturally)

 
Current behavior:

Mouse-over: hand/pointer cursor
Move: move cursor
Drop: hand/pointer

Mouse-out: hand/pointer (until user clicks somewhere, or a JS alert is triggered)

 
Note: using .blur() and .focus() on these and other page elements doesn't seem to make a difference. Tested using example (0.4.3) code, no modifications.

This work item was migrated from CodePlex

CodePlex work item ID: '31290'
Vote count: '1'

I have 3 lists, initially empty, filled dynamically later.
If I call $(list).dragsort({ dragSelector: '.item' }) when they are empty, nothing happens.
However, if at least one of the is nonempty, all of them get initialized.

This is clearly a bug, either it should initialize either way (preferred) or only for nonempty lists.
Happens in current firefox & chrome, not tested elsewhere.

For the, the workaround of creating the lists with a placeholder item, initializing and then deleting the item works.

This work item was migrated from CodePlex

CodePlex work item ID: '33484'
Vote count: '1'

I have an UL with 9 LI items laid out more or less like the image on the project's homepage. The difference is that UL has width and height set to 100% within a fixed-dimension container, and all LI items have width and height set to 33.33% and floated left.

What happens is that layout becomes broken in various ways when placeholder replaces one of the LI elements. I managed to fix this by removing the .css(...) part on line 124 (I am using the version of the code that can be downloaded from the download section).

I assume that the calculated width/height that jQuery returns doesn't exactly match the way browser calculates 33.33% in this case.

Here is the relevant CSS I use:

.shuffleboard {
position: relative;
padding: 1em;

}

.shuffleboard ul {
position: relative;
margin: 0 auto;
padding: 0;
width: 100%;
height: 100%;

}

.shuffleboard li {
list-style: none;
float: left;
width: 33.333%;
height: 33.333%;
position: relative;

}

This work item was migrated from CodePlex

CodePlex work item ID: '33636'
Vote count: '1'

In version 0.4.1, Line 188 reads:
 
list.removeAttr("data-origStyle"); (causing an error).
 
But should be
 
list.draggedItem.removeAttr("data-origStyle");

This work item was migrated from CodePlex

CodePlex work item ID: '30203'
Vote count: '1'

... because of $.browser calls. Please fix this!

This work item was migrated from CodePlex

CodePlex work item ID: '34960'
Vote count: '1'

it doesn't work in ie 8. i test it in other browser and it work fine for me. There is a way to solve it ?

Thanks !
regards.

This work item was migrated from CodePlex

CodePlex work item ID: '33848'
Vote count: '1'