Drag and drop example – help me edit it

@dtothenDec 28.2007

Hi there!

I’ve got little to no JavaScripting abilities. However, trying is the best way of learning. I’ve had zero luck so far though!

The drag and drop example shown ~~[URL=”http://cyberdummy.co.uk/test/dd.php”]~~here[/URL] is a fantastic little script – however, I would like to be able to move the list items up and down the list, but not from one group to another.

You can download the source files ~~[URL=”http://cyberdummy.co.uk/test/dd.zip”]~~here[/URL].

Any help you can give me is very much appreciated

Dave

to post a comment

JavaScript

@smickusDec 28.2007 — #I don't understand what you need? Surely you just wouldn't put more than one column in there so they will stay within one list?

@EndangeredMassaDec 28.2007 — #You can use that script to accomplish this. You just have to pay attention to the onload function.

View the source for the demo page. You'll see a function assigned to the "window.onload" event. Notice how there is a call for each dragdrop container that assigns different things.

In the "DragDrop.makeListContainer" call, the group is specified. If you want to make a single list where you can only reorder the items, then just make this call for each such list and make sure that all lists have a different group id.

Here's an example:

[CODE]window.onload = function() {
 var list = document.getElementById("left_col");
 DragDrop.makeListContainer( list, 'g1' );
 list.onDragOver = function() { this.style["background"] = "#EEF"; };
 list.onDragOut = function() {this.style["background"] = "none"; };
 
  list = document.getElementById("center");
  DragDrop.makeListContainer( list, 'g2' );
  list.onDragOver = function() { this.style["background"] = "#EEF"; };
  list.onDragOut = function() {this.style["background"] = "none"; };
 
  list = document.getElementById("right_col");
  DragDrop.makeListContainer( list, 'g3' );
  list.onDragOver = function() { this.style["background"] = "#EEF"; };
  list.onDragOut = function() {this.style["background"] = "none"; };
 
  list = document.getElementById("sajax1");
  DragDrop.makeListContainer( list, 'g4' );
  list.onDragOver = function() { this.style["background"] = "#EEF"; };
  list.onDragOut = function() {this.style["background"] = "none"; };
  list.onDragDrop = function() {onDrop(); };
 
  list = document.getElementById("sajax2");
  DragDrop.makeListContainer( list, 'g5' );
  list.onDragOver = function() { this.style["background"] = "#EEF"; };
  list.onDragOut = function() {this.style["background"] = "none"; };
  list.onDragDrop = function() {onDrop(); };
 };[/CODE]

@dtothenauthorDec 28.2007 — #That works alright... Doesn't work with the PHP though ?

That may be because I've fiddled with the PHP myself, I'll have a little play around.

Thanks ?

EDIT: Aha, I guess its something to do with

[CODE]function getSort()
 {
 order = document.getElementById("order");
 order.value = DragDrop.serData('g1', null);
 }[/CODE]

@dtothenauthorDec 28.2007 — #

[CODE]function getSort()
 {
 order = document.getElementById("order");
 order.value = DragDrop.serData('g1', null);
 order.value += ":"+DragDrop.serData('g2', null);
 order.value += ":"+DragDrop.serData('g3', null);
 order.value += ":"+DragDrop.serData('g4', null);
 }[/CODE]

Works! Thank you so much, EndangeredMassa. Very much appreciated!

Drag and drop example – help me edit it

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Drag and drop example – help me edit it

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴