Drop target DIV

**Beth** · 06-13-2008, 09:00 AM

1) Script Title: DOM Drag & Drop Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/domdrag

3) Describe problem: How do I amend this script to include a drop target DIV?

Code:

<html>
<head>

<style type="text/css">
.drag{
    position:relative;
	cursor:move;
	z-index: 100;
} 
</style>

<script type="text/javascript">
/***********************************************
* Drag and Drop Script: © Dynamic Drive http://www.dynamicdrive.com
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}

dragobject.initialize()
</script>


</head>
<body>

<div class="drag">Hello</div>

</body>
</html>

Thanks.

**Nile** · 06-13-2008, 11:35 AM

What do you mean by drop "target" div? If you explained it better or have an example, I may beable to help.

**Beth** · 06-13-2008, 01:19 PM

Thanks for replying Nile. I couldn't find any examples on DD but what I have in mind is kind of similar to what they have here:

http://www.dhtmlgoodies.com/scripts/...ag-drop-2.html

I'm just looking for a way to have a box where the dragged text can be dropped into. It's not necessary that it has any of the drag effects that the above example has. I'd much prefer to use the DD script because it's more versatile. Is this possible with the DD script?

**Nile** · 06-13-2008, 07:11 PM

I think that you should just use the one that you linked me to.

Thread: Drop target DIV

Thread Tools

Search Thread

Drop target DIV

Bookmarks

Bookmarks

Posting Permissions