I use it for a broadcast-distribution-software for a local TV-station in Austria. With the drag&drop-functionality, you can choose the broadcasts you need for a certain area and sort them in the way you want, then you click “Distribute” and a complete tv-show is created and automatically distributed to the region-specific network.

Quite interesting and probably an unexpected way to use it…

Thanks for your work, without you I really would have problems…

I am building an interactive team selection component for my clubs website and players can play in multiple teams each weekend… So I need be able to assign same player to multiple teams…

Great work. Nice script!

I am trying to do the following:

i have tables laid out horizontally (for example say there are 5 tables). Now tables have the following numbe of rows:

table Rows
=========================
table1 3
table2 4
table3 1
table4 3
table5 5

I have to give user flexibility to:
1) I need to drag the whole table i.e. exchange position of table1 and table2 etc.

2) I need to exchange rows in the table itself.

3 )I need to exchange rows from one table to another.

Is it easy to do this? How should i go about this? I am not DHTML pro, basically system programmer.

Any pointer to solve this will be highly appreciated.

Regards,

Dipesh

Ulrich,
That sounds like a very cool feature to able to have. I think it can be done fairly easily I will have a look into it.

You could maybe implementing the table swapping as the parts are swapped here:

http://kiwi-interactive.com/experiments/inlineEdits/drag.html

to swap rows in the table(s) I am not sure you try implementing them as lists instead and swapping them that way?

Thanks for the code.

Cheers
Tyler Leeds

http://dewey.umflint.edu/drag_and_drop/

I can’t use ajax for this; I just need a regular form parameter (or set of form parameters) that contain the info.

Any ideas? I sure could use them! (-;

When the user clicks the submit button the onclick event calls the javascript function getSort() this function calls a function in the dragdrop.js file I added called serData() basically it returns a formatted string of the order of the elements in the diffrent lists. This string is then loaded into the hidden form field called “order” so it is passed a long in the POST to the php script where the hidden field is then parsed by the php function parse_data() to return a usable array.

Hope that helps!!

– Tom

dewey.umflint.edu/drag_and_drop/

and click the button, it DOES show the hidden input field parameters–it’s blank, with commas delimiting each entry, but with nothing to delimit. It’s very strange, like there’s data that’s supposed to be passed there. Am I doing somethign wrong? Any ideas? I’m growing despondent and have taken to randomly throwing variables around to see what’s what …!

Looks good the serData() function uses the ID tags of the li element as the name for the items add these to your list item and should should be good eg

<li id=”fg”> Fred Goodman </li>

If you dont want to use the id and instead want to use the list item name change this line of code in serData()

string += items[i].id;

to

string += items[i].innerHTML;

Good luck!

– Tom

– Juan

This script is exactly what I needed. But I am trying to make nested draggable lists, so I need to be able to set a handle. I tried editing the source a little but I didn’t manage to find a way. is there anyone who could help me along a bit?

-Joris

Adam, it looks like you have got your work cut out making something that interactive, but it sounds very cool please keep me updated on how you get along with it.

Joris, how do you mean set a handle ? You only want to drag items inside the lists that are nested?

– Tom

Another thing, I have tried to do the Inline Editing inside your code but the function:
===========================
window.onload = function() {

/* var list = document.getElementById(”left_col”);
DragDrop.makeListContainer( list, ‘g1′ );
list.onDragOver….
============================

that is part of your java cancels the funtionality of being able of drag items and editing them from Tim Taylor’s scripts:
I’ also found this other great script that lets you save your edited content from a table into the database somewhat like what you did with your script to send it to a DB with AJAX.
http://labs.revision10.com/experiments/dat/dat_example.php

and I have been working on it but I’m not a big expert on PHP and Java just yet.. so I’m playing around with things at the moment.
Here’s my sample of what I’m working on with your script:
http://www.dlplp.com/v6/test/dd.php
and the one for editing fields:
http://www.dlplp.com/v6/test/edit_fields.php
so I still got a long way to go.. specially for me cause I’m just not that knowledgable with PHP and JS

Further more, I’m wondering if it is possible to add a second layer to the edit in place feature. This would make it possible that not only the text on the button (as shown on the button) but also the target-link of the button would be editable on the same page. My idea is that selecting these editable fields would happen with a single or a double click. (Clicking the button once would result in editing the text on the button, clicking twice would result in editing the a href of the button.)

With this added feature it would be possible to make an all editable sortable list. That would be a great feature for editing menu’s in cms-es everywhere! Ideas? Anyone?

(notice, I’m posting here, because of all the idea’s in the previous posts, thinking it would be better to group all the idea’s)

Greets,

Jeroen

createGroup : function(element) {
var group = new _ToolManDragGroup(this, element)

var position = “”;//ToolMan.css().readStyle(element, ‘position’)
if (position == ’static’) {
element.style[”position”] = ‘relative’
} else if (position == ‘absolute’) {
/* for Safari 1.2 */
ToolMan.coordinates().topLeftOffset(element).reposition(element)
}

return group
},

That is causing this undesired effect.. these ‘repositioning’ commands.. any help would be appreciated.. i’m still gonna try to debug this

Thanks.
Omar

Thanks

Thanks

one little detail though: your empty ul.sortable elements don’t pick up list elements.. maybe you should add something like “ul.sortable {min-height: 1em;}” to the css, or else all your listitems will end up in one list.

so it would look something like this, where i can drag items in and out of innerurl.

Seven
One
Six

One
Two

Great Script, only issue i am facing is how to make drag item to auto scroll browser window.

thanks.

see, i want to add a handle, so that dragging will only happen when i mousedown on a particular place inside the list and prevent dragging when highlighting the text inside. cant seem to find how to integrate tool-man handle with your script

thanks

I am having a little problem, though. First of all I changed my mysql ‘item’ field to text instead of varchar. (Maybe this is where it goes wrong).

The problem I’m experienceing is that list items containing line breaks or br-tags doesn’t get saved to the database for some reason.

If anybody wanna take a whack at this my adress is http://www.twotype.se/dd/dd.php

Cheers.

Just to make sure it wasn’t something else on the page, I took your above example (View Sourced, Saved) and wrapped each list in a table and then wrapped the page in a table (i.e. nested tables) and it broke as well.

Anyone else encountered this issue? Any ideas on how to overcome it?

Ths.

http://www.realsimplecms.com/temp/index.html

Ultimately I want the system to look and work the same way in .NET, Java, PHP and ColdFusionMX

http://www.MarkIreland.com.au

I’m trying to set up the drag and drop on a little complex web page, and I come to the following problem : I have put drag and drop list in a relative div, that has a left margin, and on MSIE the drop area becomes active with an offset that is equal to the left margin. So to activate the drop area you have to move the mouse to the right of the area. Of course such behaviour does not append in Firefox or Safari where every thing works perfectly well.
Here is the code that does not work ;
http://www.enseirb.fr/~goudal/tliste/Listes.html
Draging from the left list to one of the right one does not work will on MSIE

That being said, let me give you an example of what I see wrong… If you have a column that is 600 px wide, followed by a break and two columns side by side each 300 px, and you have a large amount of text in each of your draggable boxes, like stories in a CMS, and you go from the top (600 px) to the bottom colums, as soon as that block leaves the column, you have to drag the block to the location where the column WAS, not is now. Remember, the story or draggable block that your moving is fairly large. So moving it outside of its parent causes the parent column to resize to a fairly small former self. Then the user has to drag the story to a theoritical location.

The proposed solution would be to not change the size of the parent until the drop has occured. This way the user can see exactly where he/she needs to drag the box too. Now, the draw back to this solution is that if they drag something big into a small area, or any area for that matter, the area will not expand until they drop the item. The only solution for that would be the line with the arrows showing you where the drop will take place. You know what line with arrows that I am talking about?

If you were dragging something between Item 1 and Item 2, it would look like this:

Item 1
>——————–

Item 1
)——–(
Item 2
Item 3

It should look like that. But with arrows.

Anyways, what I put after that was basically I am trying to get this working today, and if I do, Ill post a link to the code and an example.

But thanks for all your work, the script is very nice.

http://script.aculo.us/demos/shop

this is a neat example i wish it was text and not image.. Any chance of implementing the above example with list boxes?

Great little library by the way.

But I couldn’t sort a way to implement an handler like in the original script from Tim Taylor, wich in a CMS its preferable due to layer sizes.

Thanks

Can you give some direction to modifying the script to drag by handle (title bar style), instead of the entire list item?

I’ve been trying to add the BoxHandle functionality in Tim’s example at http://tool-man.org/examples/dragging.html

Line 37 of the dragdrop.js seems to be the key…
DragDrop.makeItemDragable(items[i]);

I’d like to make the first div of the list item the handle.

Your direction is very appreciated.

in the window.load function write :

var DragAllowed = false;

then in the onmousedown event of whatever the allowed handle write DragAllowed = true;

add var DragAllowed = false; to any other objects you do not want to allow to get dragged

in the drag.js file find function:
onMouseDown : function(event) {

and wrap the entire code inside with a simple :
if (DragAllowed){
…original code
}

I try to use it (to make little cms) but I must drop only one item in each container… (if a container already contain an item, it must not be dropable by a second item).
Is anybody can help me please ?

best regards…

Even setting the DragAllowed line to “true” in the onload breaks the code when the if(DragAllowed) is put in the onMouseDown function.

ex. in index

window.onload = function() {
var DragAllowed = true;
…
}

and in drag.js

onMouseDown : function(event) {
if (DragAllowed) {
…
}
}

I’d really appreciate your further help though. Please contact me via my site above!

(any thoughts Tom?)

I need help for Multi List Drag and Drop,

The Multi List Drag and Drop has a functionality that is draggable by taking mouseover on whole “”, what i want is to create a handle for it, i dont want section to be draggable, i want is to set a particular area to drag that complete “”,….

Need this desparatly please help….

Waiting for response….!

Regards
Kapil Kanojia

I’m trying to create editable navigation (left, top, and bottom) where the users can drag and drop between the lists.

I have it working, but the horizontal lists are shakey when you drag items over it, and you can only drag them to the far left place.

Thanks,
Brian

Any help would be really cool.

- Jim

Keller

i’ve some problems to sort a list in two dimensions, it doesn’t work as in Tim’s example. Has someone found a solution to this ?

Great script. Downloaded to play wth it, and of course, ran into a problem. Getting the follwong errors:

Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in www\test02\dd.php on line 224

This error occurs for line:

235, 247, 269, 279, and points to:

while($rw = mysql_fetch_array($r))

Any ideas?

Thanks,

Ray

http://labs.revision10.com/experiments/dat/dat_example.php
and yours ? that would be awsome!!!!

http://tool-man.org/examples/sorting.html

Search on the page for this “Example: Sorting in two dimensions”

Does anyone knows how to constrain the dragging?
I’m not a js kiddie and need some general tips..
I’ve fiddled with the constrainVertial but that did nothing…

Many thanks in advance!

:: Don

I what browsers do the multi list drag and drop work

http://www.cyberdummy.co.uk/test/dd.php

Thank you,
Samir

I need to implement a trash can feature in addition to moving between two lists.

Thanks!

Thanl you.

Is it possible to use this script with div layers instead of ul/li ?

Also, I’d like to change content of a layer/list when dropped in one specific draggable area?

Thanks in advance!

just wanted to use the Sajax-part of your demo dd.php for my app. In my case though, it was important to know, which -Element was being dragged and what drop zone was used. The function OnDrop() in the demo having no params just was too unspecific for me.

So I changed line 227 in dragdrop.js from
this.parentNode.onDragDrop();
to
this.parentNode.onDragDrop(this.id,this.parentNode.id);

Now the first parameter in my client-side event handler tells me the id of the -Element and the second the id of the -Element being used as a drop zone. In the PHP-Part I only have to submit this single operation to the database.

Thanks for your great work!
Markus

http://turk-182.com/eMortal/admin/test.html

i got it to work, but the only problem is that the sorting doesnt really work right. try and drag an image in between 2 others and it jumps to the beginning or end of that row. anyone have any ideas on how to make this a little more smooth like here.

http://turk-182.com/eMortal/admin2/testSortable.php

reference to amir’s post, i think an additional support to have a handle (hotspot) for dragging would be great! Any life saviour?

anyone have the modification to enable a handle (hotspot) for dragging??? Aparently, the author doesnt seems to reply anymore

The html looks like:

images/google.gif” >

Excellent program!

I made a little game type thing with it for fun.

http://www.recordcorner.com/_experiments/squares/

One thing I have noticed is that if I put tons of squares, the algorithm because much much slower.

Any way around this to keep it fast?

How do you keep from highlighting the text on the page while dragging?

event handling, like stopping propagation? i kinda tried that.

Just a tip on where to look for an answer would be really helpful. Thanks a lot.

I need swap table columns on drag and drop.

Please let me know the way.

have a nice day.

jeeva

Here’s an example that uses XML/XSL, but it only works in IE…
http://www.15seconds.com/issue/020424.htm

Clicking on the demo does not work for some reason, but you can download the code, and open it i IE, and it works really well. I’d much rather have this kind of functionality without the XML/XSL….

In my version, I want to include a checkbox inside the boxes so that a use can choose the option. In all the browsers except Safari, this works fine. The problem in Safari is that the checkboxes aren’t clickable. The cursor stays in the move position. In the other browers I guess the checkbox field overrides the movable aspect of the box and remains clickable.

Does anyone know how to fix this in safari???

I thought about alterating the javascript so that only part of the box is movable, but I don’t really know what to change in the javascript code to do this.

Here is my example:

http://www.recordcorner.com/sorting_test2.php

Thanks!
xenakis

A big improment from the multi list version by Ben Levy.

Just found 1 problem:
When I set the style of the to be float:left; (coz i want the elements in the list to show horizontally), the movement of the element within the same list would go wired.

It will be of greate help if this can be fixed.

Thank You

If you have can you please share?

PLEEEEZE

-Tony

Tony

Will try to test with my CMS …
http://www.vision.to/CMS_BE/Home/

Btw what are conditions of use, license ?
Any donation info ?

- the box do not always take the dimensions of my object, even if your are over it

- Sometimes a bigger box wich is over an over smaller box, will be bigger to welcome my item, and in this case I cannot put it in the smallest box ….

if you don’t really understand my problems, try yourself :

http://dev.sportanddev.org/en/exemple/

does anyone have a good slution to fix this bug ???

Mail : jperriard@floor.ch
SkyPe : floor004

Thanks, Julien

I would love to see a few extra features added…

If anyone feels up to the follow changes let me know, there might be some cash in it for you!

1) Drag from a “Master List” on the left to a “Playlist” on the right. This would require a copy or clone feature (as so many have requested so far). Items dragged from the left would be added to the list on the right (but would remain in the master list on the left when the submit button is hit. So only the list on the right would be updated). It would also be nice to lock the items in the master list so they can be dragged out of the list but not dragged anywhere else within their own list (however the ability to sort the order of the items in the master list would be nice: by name, id, date etc). The list on the right would be sortable however.

2) Garbage Can - Somewhere to drag items from the Playlist (list on the right) so they are deleted.

3) Clickable Links - Each item would be clickable as well dragable. Ideally the links would come from a column in the database.

4) Add New Item - The ability to type in a text field and hit submit and add the item into the list on the right. This would be perfect for adding Titles for categories for example)

5) Change List on Right - The ability to select from a drop down (or something else) different lists on the right. Each list could be a different table in the database or something?

What I am looking for may be somewhat like the mods Sebastian Moser (see Post #2) has made?

If anyone feels up to the challenge of any or all of these mods please let me know! If you have any questions just email me! I am comfortable with PHP and MYSQL but my javascript/ajax skills are limited.

Thanks, Andy ( junkedout@gmail.com )

if (y > (window.innerHeight + window.pageYOffset - 10)) {
window.scrollBy(0,10);
}
if (y

The link you gave Dipesh (http://kiwi-interactive.com/experiments/inlineEdits/drag.html) regarding the tables and rows swaping no longer exists. Do you have any other reference?

Thanks
Luenib

Thanks again
Luenib

I can pay for this if this can be done.
mail me @:
seba.kerckhof@gmail.com

I have also made something that dynamicly makes new lists (in ajax) but, it also has to add something in the tags that initialate the list, but I can’t get it to work, if anybody can do this (I can pay for it) also mail me.

Thanks for trying to add the scolling. I tried it out, but actually it did not work in (in i.e.6.0). It did work on your page if you want to move an item from one column to the other, but not if you work with only one column.
Funny thing is that if you want to take an item down within the same column, and you reach the end of the window, intuitively you use the scroll wheel of the mouse, and the window moves down. But when you then continue dragging the item down, the pointer will move down, taking distance from the item, but the item won’t move further.
How to solve this?