Page 1 of 1

Urgent: Drag and Drop component

Posted: Mon Apr 03, 2006 3:32 am
by thomas777neo
Hi All

I am seriously struggling with a drag and drop feature that I need to build into one of my systems

I am using the DynAPI' version of the drag and drop component.

My objective is to have a list/menu as the first drag from component. This will contain people. A second layer (image etc) will contain a group (sms group). So that if I drag the person onto the group, I will link the person to the group in a mysql database.

Here is what I have tried, I cant seem to get a value from the list/menu after the drop.

I think it is just a lack of javascript knowledge. I know it is not primarily a php question, but I'm going for a long shot here

Code: Select all

<html>
<head>
<title>DynAPI Examples - Drag Icon</title>

<script language="JavaScript" src="../src/dynapi.js"></script>
<script language="Javascript">
dynapi.library.setPath('../src/');
dynapi.library.include('dynapi.api');
dynapi.library.include('DragEvent');
</script>
<script language="Javascript">

var icon = new DynLayer('<img src="images/1138703081Copy of entity.jpg">',0,0,30,25);
icon.setMaximumSize(30,25);

dynapi.functions.getImage("images/menu_side.gif");
var icon2 = new DynLayer(null,0,0,0,0,null,'images/menu_side.gif');

// layer 2
var lyr = new DynLayer('<select size=6 name=entity_select_id><option value=1>Thomas</option><option value=2>Johann</option></select>',50,150,100,100,'white');
lyr.setDragIcon(icon);
lyr.setDragEnabled(true,null,true);
dynapi.document.addChild(lyr,'layer2');
lyr._tag='Entity';

// target
var lyr = new DynLayer('Target',250,100,300,210,'lightblue');
dynapi.document.addChild(lyr,'target');
lyr.addEventListener({
	ondrop:function(e,dragIcon){
		//alert(lyr);
		//alert(dragIcon);
		//alert(e);
		o = dragIcon.getDragSource();
		alert(""+o._tag+" added to SMS Group");
		//entity_test = document.drag.entity_select_id;
		//alert(entity_test)
	}
});

function changeIcon(){
	dynapi.document.layer2.setDragIcon(icon2);
}
</script>
</head>

<body>
</body>
</html>
See, it creates the object with html

Code: Select all

var lyr = new DynLayer('<select size=6 name=entity_select_id><option value=1>Thomas</option><option value=2>Johann</option></select>',50,150,100,100,'white');
But I don't know how to get the value, I have also tried to put a form around the script. Then added document.formname.submit() in the action listener to try and submit the value, but to no avail.

Your help will be much appreciated

Posted: Mon Apr 03, 2006 3:55 am
by JayBird
Not PHP related - moved to client side

Posted: Mon Apr 03, 2006 5:42 am
by patrikG
someone already invented that wheel for you ;) http://developer.yahoo.com/yui/dragdrop/

Posted: Mon Apr 03, 2006 11:03 am
by tasteslikepurple
there are also loads of cool scripts that do similar things at http://script.aculo.us/

Posted: Mon Apr 03, 2006 11:15 am
by John Cartwright
http://openrico.org/rico/livegrid.page has some really nice snipplets too..

They have 3 different drag and drop snipplets, really cool stuff.

Posted: Fri May 05, 2006 2:58 am
by thomas777neo
Thanks for the feedback, much appreciated

Posted: Fri May 05, 2006 7:01 am
by s.dot
these drag and drop interfaces can trigger a mysql query? or can gather order of a list to be submitted and then updated using a mysql query?

I have a dire need for list sorting, and this would be a perfect solution if a query can be achieved.

Posted: Sat May 06, 2006 4:41 am
by Weirdan
these drag and drop interfaces can trigger a mysql query?
AJAX?