Dragging a div along with all of 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 such that all child divs are dragged at the same time. I can drag individual divs, but that is not wh开发者_运维问答at I want. Can a div drag child divs or do they have to be images?
I am using the WalterZorn drag drop API, but am open to using any API, script or whatever.
The jQuery-UI Draggable works just fine for me and dead simple to set up. http://jqueryui.com/demos/draggable/ It works with your scenario, I just tested it.
Once you include jQuery and jQuery-UI do the following to turn your container DIV into a draggable 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>
I did something similar using Zorn's library and used Prototype together to try to make some sort of visio-like tool. I never finished it, but learned a lot in the process. It uses draggables, so maybe you'll make some use of the code. Just view the page source and it's all there.
The problem, I'm assuming, is that in your onmousedown handler you're using the event object's srcElement or target properties. When you do that, you're going to get the innermost child (due to how bubbling works).
However, if you instead use the this variable in your event handler, you will get the DOM element that you registered the event on. Below are two examples.
Incorrect 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>
加载中,请稍侯......
精彩评论