Urgent: Drag and Drop component

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
thomas777neo
Forum Contributor
Posts: 214
Joined: Mon Mar 10, 2003 6:12 am
Location: Johannesburg,South Africa

Urgent: Drag and Drop component

Post 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
User avatar
JayBird
Admin
Posts: 4524
Joined: Wed Aug 13, 2003 7:02 am
Location: York, UK
Contact:

Post by JayBird »

Not PHP related - moved to client side
User avatar
patrikG
DevNet Master
Posts: 4235
Joined: Thu Aug 15, 2002 5:53 am
Location: Sussex, UK

Post by patrikG »

someone already invented that wheel for you ;) http://developer.yahoo.com/yui/dragdrop/
User avatar
tasteslikepurple
Forum Commoner
Posts: 46
Joined: Thu Jan 26, 2006 3:38 am
Location: Bath, UK

Post by tasteslikepurple »

there are also loads of cool scripts that do similar things at http://script.aculo.us/
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post 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.
User avatar
thomas777neo
Forum Contributor
Posts: 214
Joined: Mon Mar 10, 2003 6:12 am
Location: Johannesburg,South Africa

Post by thomas777neo »

Thanks for the feedback, much appreciated
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post 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.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Post by Weirdan »

these drag and drop interfaces can trigger a mysql query?
AJAX?
Post Reply