drag and drop dhtml
Moderator: General Moderators
drag and drop dhtml
I am going to create a drag and drop feature on this mother-of-a-huge-project I'm currently working on and thought I'd post something here to get some suggestions and/or advice on where to begin.
I've looked at a few different drag and drop libararies....most notably Walter Zorns, which is pretty cool, but doesn't have the functionality I'm after.
here's what I'd like:
I have some "Clients" that can be searched and listed on a single page:
ex client list:
Bob Smith
Larry Holmes
Kyle Johnson
Billy Chumpumpskinonjo
I'd like to be able to grab one of those names and place it into a container that will do something else...in this case sign them up for an event.
My event list will be on the right side of the page, and my client list on the left. Need to be able to click and drag a client's name to the event and have it automatically sign them up. I can handle the auto sign-up part and could probably bastardize some existing d&d library to make it work, but I'd rather have this as clean as possible and build from the ground up on my own. If anyone knows of some good d&d tuts or examples, I'd love to get my hands on them....
thanks in advance.
Burr
I've looked at a few different drag and drop libararies....most notably Walter Zorns, which is pretty cool, but doesn't have the functionality I'm after.
here's what I'd like:
I have some "Clients" that can be searched and listed on a single page:
ex client list:
Bob Smith
Larry Holmes
Kyle Johnson
Billy Chumpumpskinonjo
I'd like to be able to grab one of those names and place it into a container that will do something else...in this case sign them up for an event.
My event list will be on the right side of the page, and my client list on the left. Need to be able to click and drag a client's name to the event and have it automatically sign them up. I can handle the auto sign-up part and could probably bastardize some existing d&d library to make it work, but I'd rather have this as clean as possible and build from the ground up on my own. If anyone knows of some good d&d tuts or examples, I'd love to get my hands on them....
thanks in advance.
Burr
I like these examples they work well for me:
http://cross-browser.com/x/examples/drag1.php
The last param in the function xEnableDrag() tells what to do after a user drags something. You could call the x/y cord. of the box being dragged and see if it is within the x/y cord. of the event box.
http://cross-browser.com/x/examples/drag1.php
The last param in the function xEnableDrag() tells what to do after a user drags something. You could call the x/y cord. of the box being dragged and see if it is within the x/y cord. of the event box.
apologies, I forgot to update this thread:
Pickle helped me find a good solution for dragging, and I added the dropping.
it's not x-browser (IE only), but for this project that's all I need (all in house). I know, I know, poor practice, but time is an issue...a big issue in fact.
here it is:
right now it uses images but I'm gonna change it to divs and add some xmlhttp to make this super-fly. Soon as a div is dropped into the staging area, a new row will be added to the db and then some dhtml magic to add the row to an html table.
Pickle helped me find a good solution for dragging, and I added the dropping.
it's not x-browser (IE only), but for this project that's all I need (all in house). I know, I know, poor practice, but time is an issue...a big issue in fact.
here it is:
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
.drag
{
position:absolute; cursor:hand;
}
</style>
<script language="JavaScript1.2">
var dragapproved=false;
var z,x,y;
function move()
{
if(event.button==1&&dragapproved)
{
z.style.pixelLeft = temp1+event.clientX-x;
z.style.pixelTop = temp2+event.clientY-y;
return false;
}
}
function drags()
{
if (!document.all)
return;
if (event.srcElement.className=="drag")
{
dragapproved=true;
z = event.srcElement;
temp1 = z.style.pixelLeft;
temp2 = z.style.pixelTop;
x = event.clientX;
y = event.clientY;
document.onmousemove=move;
}
}
document.onmousedown=drags;
//document.onmouseup=new Function();
xCoord = "";
yCoord = "";
function getXandY(what)
{
whId = document.getElementById(what.id);
whId.filters.alpha.opacity = 30;
xCoord = whId.style.pixelLeft;
yCoord = whId.style.pixelTop;
}
rn = 1;
function moveBack(what)
{
nLeft = z.style.pixelLeft;
nTop = z.style.pixelTop;
//alert("newleft = "+nLeft+" newtop = "+nTop);
if(parseInt(nLeft) >= 400 && parseInt(nLeft) <= 600 && parseInt(nTop) >= 300 && parseInt(nTop) <= 500)
{
var r = document.getElementById('tabl').insertRow(rn)
rn++;
var y = r.insertCell(0)
y.innerHTML = what.id;
}
whId = document.getElementById(what.id);
whId.style.left = xCoord;
whId.style.top = yCoord;
}
</script>
</head>
<body leftmargin="0" topmargin="0">
<img src="images/myimage.jpg" class="drag" id="25" style="z-index:25">
<img src="images/myimage.jpg" class="drag" id="25-1" onMouseDown="getXandY(this)" onMouseUp="moveBack(this)" style="z-index:50;filter:alpha(opacity=100);">
<img src="images/myimage2.jpg" class="drag" id="50" style="left:200px;z-index:25">
<img src="images/myimage2.jpg" class="drag" id="50-1" onMouseDown="getXandY(this)" onMouseUp="moveBack(this)" style="left:200px;z-index:50;filter:alpha(opacity=100);">
<div style="position:absolute;width:200px;height:200px;top:300;left:400px;border:1px #000000 solid">Drag pics here to add</div>
<table width="100%" style="top:200px;position:absolute" border="1" cellspacing="0" id="tabl">
<tr>
<td>Picture ID</td>
</tr>
</table>
</body>
</html>Another good source which d11wtg posted in my thread.
Burrito did you manage to set up the containers and work out when the draggable elements have been placed within the containers? I want to do something like that ruby on rails shopping cart everyone talks about, I reckon I could do the exact same with ajax/php I just need to get the interface side of it sorted. 
Major kudos for posting your source Burrito, this is going to help me hugely and I haven't found anything, anywhere that simplifies it as much as you have done there.
Am I the only one that hates using massive pre-built javascript libraries? I prefer to work out how to do things myself and only have code which is required within my application. The idea of 50kbs worth of code, half of which I'm not even going to touch doesn't really appeal to me.
I'm going to take the basis of your code for my current project if that's ok - obviously I need to sort out the cross-browser compatiblity first. I shall post back with new source when I get it sorted so I can at least contribute to your work.
Am I the only one that hates using massive pre-built javascript libraries? I prefer to work out how to do things myself and only have code which is required within my application. The idea of 50kbs worth of code, half of which I'm not even going to touch doesn't really appeal to me.
I'm going to take the basis of your code for my current project if that's ok - obviously I need to sort out the cross-browser compatiblity first. I shall post back with new source when I get it sorted so I can at least contribute to your work.
noFourtet wrote: Am I the only one that hates using massive pre-built javascript libraries?
absolutely...go nuts.Fourtet wrote: I'm going to take the basis of your code for my current project if that's ok
please do.Fourtet wrote: I shall post back with new source when I get it sorted so I can at least contribute to your work.