HTML5 Drag and Drop - PullRequest
Новая
       2

HTML5 Drag and Drop

0 голосов
/ 22 мая 2011

У меня возникли проблемы с поиском способа создания области перетаскивания на веб-странице.У меня есть несколько изменяемых размеров <div> с, и я хочу иметь возможность перетаскивать их куда угодно.Думайте об этом как о перетаскивании значков на рабочем столе вокруг рабочего стола и размещении их в любом месте.Было бы хорошо, если бы я мог добавить кнопки к этим <div> s, чтобы изменить их z-индексы и перекрыть их.Требует ли это использования <canvas>?В настоящее время я использую <section> для области перетаскивания.

Спасибо!

Ответы [ 2 ]

1 голос
/ 23 мая 2011

Я не думаю, что вы можете сделать это с помощью HTML-Only, однако это пример того, как вы могли бы сделать это с помощью JavaScript: 

<html>
    <head>
        <style>
            .draggable {
                position: absolute;
                cursor: default;
                background-color: purple;
                top: 0px;
                left: 0px;
            }
        </style>
    </body>
    <body onmouseup="stopMovement()">
        <div id="draggable" class="draggable" onmousedown="startMovement(event)">
            Drag me around :D
        </div>
        <script>
            var drg = document.getElementById("draggable");
            var xDisplacement = 0;
            var yDisplacement = 0;
            function startMovement(e) {
                xDisplacement = e.pageX - getComputedStyle(drg).left.substring(0, getComputedStyle(drg).left.length - 2);
                yDisplacement = e.pageY - getComputedStyle(drg).top.substring(0, getComputedStyle(drg).top.length - 2);
                document.body.onmousemove = moveDraggable;
            }
            function stopMovement() {
                document.body.onmousemove = null;
            }
            function moveDraggable(e) {
                drg.style.top = e.pageY - yDisplacement;
                drg.style.left = e.pageX - xDisplacement;
            }
        </script>
    </body>
</html>
1 голос
/ 23 мая 2011

Если вы хотите сделать drag-n-drop самостоятельно, вам может понадобиться один div, заключающий перетаскиваемый div, поэтому вы можете использовать верхнюю часть большего div в качестве перетаскиваемой области.

, у вас есть 

<div id='draggablediv' style='backgroundcolor: blue;'>
<div class='draggable' style='position: relative; top: 5em; left: 0em;'>...
</div></div>

Этот код, например, чисто не будет работать, кстати.

Итак, на draggablediv вы бы поместили обработчик события onclick, иэто запустит обработчик onmousemove и обработчик onmouseup.Последний - отбрасывать, но вы также можете иметь onblur на тот случай, если мышь переместится за пределы браузера.

Затем, когда мышь перемещается, просто измените положение div, так что эти div должныбыть абсолютным или относительным (абсолютное было бы проще).

Важно удалить обработчики событий, установив их в null при отпускании кнопки мыши.

Если вы не находитесь в области, которую можно сбрасывать, то убедитесь, что div вернул его туда, где он начался, поэтому вам понадобится закрытие, чтобы вы могли запомнить исходные координаты сверху / слева от div.

Вы захотите ознакомиться с этой функцией: 

(function g(someval) {
    var a = someval;
   return h() {
   }
})(origval);

Например, поиск getImgInPositionedDivHtml в http://jibbering.com/faq/notes/closures/

Чтобы изменить z-index, вы можете захотеть иметь+/- в div и при нажатии на него z-индекс изменяется.

Вот страница, которая говорит об изменении z-index.

http://msdn.microsoft.com/en-us/library/ms533005(v=vs.85).aspx

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...