Перетаскивание элемента div вместе со всеми его дочерними элементами div - PullRequest
2 голосов
/ 09 апреля 2010

У меня есть следующий код:

<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 или они должны быть изображениями?

Я использую API-интерфейс перетаскивания WalterZorn, но могу использовать любой API, сценарий или любой другой.

Ответы [ 3 ]

2 голосов
/ 09 апреля 2010

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>
2 голосов
/ 09 апреля 2010

Я сделал что-то похожее , используя библиотеку Цорна, и вместе использовал Prototype, чтобы попытаться создать какой-то видообразный инструмент. Я никогда не заканчивал это, но многому научился в процессе. Он использует Draggables, так что, возможно, вы будете использовать код. Просто просмотрите страницу источника и все там.

0 голосов
/ 17 апреля 2011

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

Однако, если вместо этого вы используете переменную this в обработчике событий , вы получите элемент 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...