Dragging a div along with all its child divs
I have the following code:
<body>
<div id="container" style="position:absolute; left:0px; top:0px; z-index:1;">
<div id="div1" style="background-color:Red; position:absolute; left:0px; top:0px; width:256px; height:256px; z-index:0;" > </div>
<div id="div2" style="background-color:Black; position:absolute; left:256px; top:0px; width:256px; height:256px; z-index:0;" > </div>
<div id="div3" style="background-color:Green; position:absolute; left:512px; top:0px; width:256px; height:256px; z-index:0;" > </div>
<div id="div4" style="background-color:Yellow; position:absolute; left:768px; top:0px; width:256px; height:256px; z-index:0;" > </div>
<div id="div5" style="background-color:Blue; position:absolute; left:1024px; top:0px; width:256px; height:256px; z-index:0;" > </div>
</div>
<script type="text/javascript">
<!--
SET_DHTML("container");
//-->
</script>
</body>
I want to drag the container div in such a way that all child divs are dragged at the same time. I can drag and drop individual divs, but that's not what I want. Can div div div div or do images?
I am using WalterZorn drag and drop API, but I am open to using any API, script or whatever.
JQuery-UI Draggable works great for me and is dead, just customizable. http://jqueryui.com/demos/draggable/ It works with its script, I just tested it.
With jQuery and jQuery-UI enabled, do the following to turn your container DIV into a drag and drop DIV:
<script type="text/javascript">
//This makes sure that the code only runs once the whole
//HTML document has been loaded into the Browser.
$(document).ready(function(){
$("#container").draggable(); //Intialize the Draggable ability
});
</script>
source to share
I did something similar using the Zorn library and used Prototype together to try and make some kind of visually similar tool. I never finished, but I learned a lot. It uses draggables, so maybe you will use code. Just browse the page source and everything is there.
source to share
The problem, I suppose, is that in your handler onmousedown
you are using the properties of the event object srcElement
or target
. When you do this, you will have your innermost child (due to the way bubbling works ).
However, if you instead use a variable this
in your event handler , you will get the DOM element where you registered the event. Below are two examples.
Invalid example:
<script type="text/javascript">
function onMouseDown(e) {
var event = e || window.event;
var element = event.target || event.srcElement; //refers to innermost element
onDragStart(element, event);
}
</script>
Correct example:
<script type="text/javascript">
function onMouseDown(e) {
var event = e || window.event;
var element = this; // refers to the element that you set the callback on
onDragStart(element, event);
}
</script>
source to share