I am making a sticky note system, and I want the sticky notes to be draggable with javascript. I found a drag and drop script on this site which was quite useful to me. But I have a “drag bar” that is inside the sticky note div which is supposed to be the only place where you can drag that specific sticky note. The script I have drags only what the cursor is clicking on and I want it to drag the “.dragbar” div’s parent element, “.parent”.
Right now, the script is set to drag .parent when you click on .parent. How, in this code can I select the parent div of “.dragbar”, which is “.parent”?
If I make the script select .dragbar, it just moves the dragbar around inside the .parent. note: the script is the original code, except the selector names in lines 87 and 95 are changed from “drag” to “parent”.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.pagecontent {
width:98%;
height:96%;
overflow:hidden;
background:lightyellow;
border:1px solid black;
padding:10px;
}
.parent {
position:relative;
height:300px;
width:300px;
background-color:gray;
border:1px solid black;
float:left;
margin:0 10px 0 0;
overflow:auto;
}
.dragbar {
height:50px;
width:300px;
background:lightgray;
cursor:move;
position:relative;
}
</style>
</head>
<body>
<div class="pagecontent">
<h1>Dragging Practice</h1>
<h3>Drag and drop the parent div by using the child dragbar</h3>
<pre id="debug">mouse up</pre>
<div class="parent">
<div class="dragbar">I am the Child, my class is .dragbar</div>I am the Parent, my class is
.parent</div>
<div class="parent">
<div class="dragbar">I am the Child, my class is .dragbar</div>I am the Parent, my class is
.parent</div>
<script language="JavaScript" type="text/javascript">
<!--
// this is simply a shortcut for the eyes and fingers
function $(id) {
return document.getElementById(id);
}
var _startX = 0; // mouse starting positions
var _startY = 0;
var _offsetX = 0; // current element offset
var _offsetY = 0;
var _dragElement; // needs to be passed from OnMouseDown to OnMouseMove
var _oldZIndex = 0; // we temporarily increase the z-index during drag
var _debug = $('debug'); // makes life easier
InitDragDrop();
function InitDragDrop() {
document.onmousedown = OnMouseDown;
document.onmouseup = OnMouseUp;
}
function OnMouseDown(e) {
// IE is retarded and doesn't pass the event object
if (e == null) e = window.event;
// IE uses srcElement, others use target
var target = e.target != null ? e.target : e.srcElement;
_debug.innerHTML = target.className == 'parent' //Selector
?
'draggable element clicked' : 'NON-draggable element clicked';
// for IE, left click == 1
// for Firefox, left click == 0
if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'parent') //Selector
{
// grab the mouse position
_startX = e.clientX;
_startY = e.clientY;
// grab the clicked element's position
_offsetX = ExtractNumber(target.style.left);
_offsetY = ExtractNumber(target.style.top);
// bring the clicked element to the front while it is being dragged
_oldZIndex = target.style.zIndex;
target.style.zIndex = 10000;
// we need to access the element in OnMouseMove
_dragElement = target;
// tell our code to start moving the element with the mouse
document.onmousemove = OnMouseMove;
// cancel out any text selections
document.body.focus();
// prevent text selection in IE
document.onselectstart = function () {
return false;
};
// prevent IE from trying to drag an image
target.ondragstart = function () {
return false;
};
// prevent text selection (except IE)
return false;
}
}
function ExtractNumber(value) {
var n = parseInt(value);
return n == null || isNaN(n) ? 0 : n;
}
function OnMouseMove(e) {
if (e == null) var e = window.event;
// this is the actual "drag code"
_dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
_debug.innerHTML = '(' + _dragElement.style.left + ', ' + _dragElement.style.top + ')';
}
function OnMouseUp(e) {
if (_dragElement != null) {
_dragElement.style.zIndex = _oldZIndex;
// we're done with these events until the next OnMouseDown
document.onmousemove = null;
document.onselectstart = null;
_dragElement.ondragstart = null;
// this is how we know we're not dragging
_dragElement = null;
_debug.innerHTML = 'mouse up';
}
}
//-->
</script>
</div>
</body>
</html>
I would advise you look into jQuery UI’s draggable and droppable. These will undoubtedly be more powerful than the script you linked, and you can set up elements to be draggable with jQuery’s powerful selectors, and droppable only within certain elements.