Перетаскивание DIV вместе со всеми его ребенка DIVS

У меня есть следующий код:Перетаскивание DIV вместе со всеми его ребенка DIVS

<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;" >&nbsp;</div> 
     <div id="div2" style="background-color:Black; position:absolute; left:256px; top:0px; width:256px; height:256px; z-index:0;" >&nbsp;</div> 
     <div id="div3" style="background-color:Green; position:absolute; left:512px; top:0px; width:256px; height:256px; z-index:0;" >&nbsp;</div> 
     <div id="div4" style="background-color:Yellow; position:absolute; left:768px; top:0px; width:256px; height:256px; z-index:0;" >&nbsp;</div> 
     <div id="div5" style="background-color:Blue; position:absolute; left:1024px; top:0px; width:256px; height:256px; z-index:0;" >&nbsp;</div> 
    </div> 

    <script type="text/javascript"> 
     <!-- 

     SET_DHTML("container"); 

     //--> 
    </script> 
</body>

Я хочу, чтобы перетащить «контейнер» DIV таким образом, что все дочерние дивы затягиваются одновременно. Я могу перетащить отдельные div, но это не то, что я хочу. Может ли div div div div div или они должны быть изображениями?

Я использую API перетаскивания WalterZorn, но я открыт для использования любого API, скрипта или чего-то еще.

источник

2010-04-09 Anonymous

JQuery-UI Draggable отлично подходит для меня и мертв, просто настраивается. http://jqueryui.com/demos/draggable/ Он работает со своим сценарием, я просто его протестировал.

После того, как вы включите JQuery и JQuery-UI сделать следующее, чтобы превратить ваш контейнер DIV в 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>

источник

2010-04-09 17:56:50 7wp

I did something similar используя библиотеку Zorn и использовали Prototype вместе, чтобы попытаться сделать какой-то визуально-подобный инструмент. Я так и не закончил, но многому научился. Он использует draggables, поэтому, возможно, вы будете использовать код. Просто просмотрите источник страницы, и все там.

источник

2010-04-09 17:55:54

Я должен сказать, что является весьма впечатляющим. Код, который отвечает за автоматическое размещение строк, которые соединяют ящики, вы сами пишете код? – 7wp

Да, я сам написал все. Маршрутизация линии была интересной, но не очень масштабируемой, когда рисунок увеличился по сложности. Хороший эффект, хотя :) –

Проблема, я предполагаю, что в вашем onmousedown обработчика вы используете объект события srcElement или target. Когда вы это сделаете, вы получите самого сокровенного ребенка (из-за того, как работает bubbling).

Однако, если вы используете the this variable in your event handler, вы получите элемент DOM, в который вы зарегистрировали событие. Ниже приведены два примера.

Пример неправильного

<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>

Правильный пример:

<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>

источник

2011-04-17 18:08:19 geppy

Перетаскивание DIV вместе со всеми его ребенка DIVS

ответ

Смежные вопросы