dragsort Discussions Rss Feed

New Post: Can I order rows and columns ?

kapocris — Mon, 10 Jun 2013 14:17:44 GMT

Hello,

is it possible to use DragSort on a table and enable drag and drop on rows but also on columns ?

Thanks!

New Post: Dynamic connected lists

mdewyer — Wed, 15 May 2013 23:58:11 GMT

I need to add an additional list to a page via javascript and have the new list linked with the other existing lists to enable dragging/dropping from those other lists to the new list. Obviously just adding a new UL with the respective class doesn't work since 'dragsort' already fired on page load. I tried using 'destroy' and then re-initing dragsort after the new element has been added, but that seems to mess up everything. Is there a way to re-init dragsort after a new element has been added so that it works with the existing lists?

New Post: Save order in Mysql

ramkumarsabita — Tue, 07 May 2013 06:39:38 GMT

Hi all,
Please give me some idea to "How to save sort order" and show list item according to sort order.

New Post: asp.net c# Binding problem

simo88fano — Wed, 27 Mar 2013 16:10:48 GMT

In the example for c #
Gallery as it is defined?

    if (!IsPostBack)
    {
        Gallery.DataSource = new string[] { "blue", "orange", "brown", "red", "yellow", "green", "black", "white", "purple" };
        Gallery.DataBind();
    }

Thanks!!

New Post: jQuery List DragSort

nishigandha — Tue, 26 Mar 2013 07:53:16 GMT

Hi,

Is it possible to manage (remember) the current position of each widget while sorting the widgets.
I want it to maintain position of widget through out the session along with newly log-in.

I am waiting for your answer.

Thanks,
Nishigandha

New Post: Save order in Mysql

Pzotalis — Sat, 16 Mar 2013 00:35:29 GMT

Hi,

I continue this post because its a similar problem.

First, great script. Work great.
The problem is that I just cant understand how to save the reordered list.

I have a mysql table to order an image gallery. this is the structure after uploading the files:

ID  ORDEN   LINK
1   1           1_MG_8870.jpg           
2   2           0_MG_9260.jpg           
3   3           1_MG_9335.jpg           
4   4           2_MG_9337.jpg

Since I want to be able to change the order I'm using this script

<ul id="list1">
<?
                            
                                while($articulo=mysql_fetch_array($resultados)) {
                                                
            echo '<li data-itemid="'.$articulo["ORDEN"].'"><div><img src="multi/'.$articulo["LINK"].'" width="120" height="120" /></div></li>';
            }
    ?>
    
    </ul>
<input name="list1SortOrder" type="text" size="244" />
<script type="text/javascript">
        $("#list1").dragsort({ dragSelector: "div", dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });

           function saveOrder() {
            var data = $("#list1 li").map(function() { return $(this).data("itemid"); }).get();
            $("input[name=list1SortOrder]").val(data.join("|"));
            $.post("fotoalbum.php", { "ids": data });
        };
    </script>

I set the input to be visible and reflect the change every time I drag&drop a picture (ej: 0|1|2|3|4 and changing... ), but I'm not being able to insert this new order to de database.

Sorry if its too dumb the problem.....

THAnks!

New Post: Reorder table rows

jniemi — Wed, 20 Feb 2013 10:47:55 GMT

I've looked at the code and modifying it doesn't seem to be so easy as I wold have hoped.

Here is more or less what I have:

$("#dragsort tbody").dragsort({ dragBetween: true });

<div style='position: absolute; left: 100px; top: 100px; right: 100px; bottom: 100px; overflow: auto' id='container'>
<table id='dragsort'>
<thead>
<tr><th>...</th></tr>
</thead>
<tbody>
<tr><td>Enough rows to make the table higher than the container</td></tr>
<tr><td>Enough rows to make the table higher than the container</td></tr>
<tr><td>Enough rows to make the table higher than the container</td></tr>
</tbody>
</table>
</div>

Reordering only works properly when the container div is scrolled all the way up. If it has been scrolled 100px down, then the element being dragged is offset up by 100px.

I also tried this:

$("#dragsort tbody").dragsort({ dragBetween: true, scrollContainer: "#container" });

But scrollContainer doesn't seem to be doing anything or maybe I just don't understand how to use it properly.

New Post: Reorder table rows

jniemi — Tue, 19 Feb 2013 14:46:09 GMT

I got the code from the "SOURCE CODE" tab and it's working great.

One small problem still exists though.

My table is inside a div which has overflow: auto. The table is higher than the available height, so there's a scrollbar to scroll the div up and down. The placement of the row being dragged is displaced if the div has been scrolled down. I can probably modify the code to take the parents scrollHeight into consideration, but just so you know in case you want to fix it.

New Post: Hi how can I dragsort stop and start?

llorca — Tue, 19 Feb 2013 12:13:57 GMT

Thank you so much Mcm_ham.

New Post: Link in a list

mcm_ham — Tue, 19 Feb 2013 10:13:27 GMT

I'm just trying with Chrome v24.0.1312.57 on windows and it works, so I can look for v22 to test. But what's the CSS for the hyperlink, is it display block with height and width set?

New Post: sorting lists with text box inputs

mcm_ham — Tue, 19 Feb 2013 10:06:35 GMT

If the jquery.dragsort.js file in the grabItem function, if you remove "e.preventDefault();" then you will be able to click into a textbox to enter text.

New Post: Reorder table rows

jniemi — Tue, 19 Feb 2013 08:09:07 GMT

Thank you for the reply.

I am using jquery.dragsort-0.5.1.js from the download page. It seems there are some discrepancy in the versioning, because the source code on the "SOURCE CODE"-tab looks a lot different.

Where can I get the newest version? Do you recommend getting the code from the "SOURCE CODE"-tab?

New Post: Reorder table rows

mcm_ham — Tue, 19 Feb 2013 07:44:03 GMT

$(e.target).closest(opts.itemSelector).size() == 0)

I can't find this in the dragsort code, what version are you using?

var dragHandle = e.target;
while (!$(dragHandle).is(opts.dragSelector)) {
    if (dragHandle == this) return;
    dragHandle = dragHandle.parentNode;
}

The idea behind this code is that the element you clicked i.e. "e.target" could be inside the element acting as the drag handle e.g. you clicked a div inside a table cell. So I keep going up the tree until it matches the dragSelector. The variable "this" is the list container in this case "tbody" so if we go up that far it means no dragHandle was found and should mean we didn't click on it so return from the method. So what's failing is $(td).is("td:eq(0)") in the while condition. My suggestion would be to do this:

$("#mytableid td:eq(0)").addClass("dragHandle");
$("#mytableid tbody").dragsort({ dragBetween: true, dragSelector: ".dragHandle" });

Then it will be $(td).is(".dragHandle") in the while condition and that should definitely match the first table cell.

New Post: Hi how can I dragsort stop and start?

mcm_ham — Tue, 19 Feb 2013 06:50:26 GMT

Basically like this:

function enableDragsort()
{
    $("ul").dragsort({ dragSelector: "li", dragEnd: function() { }, dragBetween: false, placeHolderTemplate: "<li></li>" });
}

function disableDragsort()
{
    $("ul").dragsort("destroy");
}

New Post: Hi how can I dragsort stop and start?

mcm_ham — Tue, 19 Feb 2013 06:49:19 GMT

Hi how can I dragsort stop and start? Or disable and enable? Thank you from Turkey.

-llorca

New Post: Reorder table rows

jniemi — Sat, 16 Feb 2013 18:34:44 GMT

Hello

Thanks for a nice plugin.

I am having problems reordering table rows. Everything works OK if I target the table without any extra parameters, like so:

$("#mytableid").dragsort({ dragBetween: true });

However in my table the first row is the header and I want to exclude it, so I try:

$("#mytableid").dragsort({ dragBetween: true, itemSelector: "tr:gt(0)" });

But that doesn't work because the check on row number 117 is returning true:

$(e.target).closest(opts.itemSelector).size() == 0)

After this I modified my table somewhat - I added thead, tbody and tfoot elements there and targeted tbody:

$("#mytableid tbody").dragsort({ dragBetween: true });

This works, but then I want to specify the cell used in dragging the rows:

$("#mytableid tbody").dragsort({ dragBetween: true, dragSelector: "td:eq(0)" });

And again reordering doesnt work anymore. This time I believe it's failing on this row:

if (dragHandle == this) return;

So - any examples on how to reorder table rows while excluding the first row and specifying the dragSelector-cell?

New Post: sorting lists with text box inputs

tbarmann — Mon, 14 Jan 2013 16:59:16 GMT

Hi mcm,

Great plug-in! I am trying to sort a list with text box inputs. I have successfully included the text boxes by setting dragSelectorExclude to an empty string.

But when you click on a text box, the plug-in won't allow you to enter text in the box - it just assumes you want to drag. Is there a way to set the plugin to check for a single click, give focus to the text box, and temporarily turn off the dragging action? That way the text box could still be used to enter text. On mousedown, it would resume the dragging action.

Thanks for your help mcm.

New Post: Link in a list

aschutz — Thu, 25 Oct 2012 12:17:54 GMT

anybody ?

New Post: Is it possible to use it on touch devices like ipad or iphone?

ajohnclark — Tue, 16 Oct 2012 13:45:19 GMT

My gut would guide me to a lightweight mobile-only standalone library like QuoJS or HammerJS which at first glance seem to have minimum conflict with jQuery/UI and the amazing DragSort library.

Also look into HTML5 Libraries that offer drag/drop like http://kineticjs.com/ - although you'd have to most likely re-write your app/script.

Source: http://www.queness.com/post/11755/11-multi-touch-and-touch-events-javascript-libraries & http://kineticjs.com/ & http://caniuse.com/

New Post: Link in a list

aschutz — Thu, 11 Oct 2012 16:01:25 GMT

hi there ... in the code below:

<ul>
	<li id="1">
	  <img src="image.png" />
	  <a href="javascript:alert(1)"></a>
	</li>
	<li id="2">
	  <img src="image.png" />
	  <a href="javascript:alert(1)"></a>
	</li>
	<li id="3">
	  <img src="image.png" />
	  <a href="javascript:alert(1)"></a>
	</li>
</ul>

In a especific browser/OS (example: Chrome version 22.0.1229.79 on Windows ) the click on a link in the list items is ignored. This doesn't happen on another Browser/OS (example: Chromium 18.0.1025.151 on Linux).

any suggestion ?

thanks

Andreas Schütz