Как перетащить div, меняя атрибуты css left и top в HTML 5? - PullRequest
Новая
       1

Как перетащить div, меняя атрибуты css left и top в HTML 5?

0 голосов
/ 23 марта 2011

Я хотел бы выполнить перетаскивание элемента div в HTML 5. Цель состоит в том, чтобы переместить элемент div в любом месте основного контейнера.

Вот мой HTML-код: 

<html>
<head>
    <title>Mon document</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" src="dragndrop.js"></script>
</head>

<body ondragstart="dragStart(event);" ondragover="return dragOver(event);" ondrop="return drop(event);">
    <div class="box" draggable="true">
        Drag me if you can !
    </div>
</body>

style.css: 

.box {
      position: absolute;
      top: 100px;
      left: 400px;
      color: white;
      background-color: #6495ED;
      border: 10px solid #6495ED;
      -webkit-box-shadow: 4px 4px 6px #999; 
      box-shadow: 4px 4px 12px #555;
      border-radius: 7px; 
      width: 150px;
      height: 150px;
}

body {
      background-color:#EEEEEE;
}

И JavaScript: 

var mouseX;                         // Current mouse X           coordinate
var mouseY;                         // Current mouse Y  coordinate

document.onmousemove = mouseMove;

function dragStart(event) {
event.dataTransfer.effectAllowed = 'move';
event.dataTransfer.setData("Text", event.target.getAttribute('id'));
}

function dragOver(event) {
return false;
}

function drop(event) {
ev = event || window.event;
mouseX = ev.pageX;
mouseY = ev.pageY;

var element = event.dataTransfer.getData("Text");

document.getElementById(element).style.left = mouseX+"px";
document.getElementById(element).style.top = mouseY+"px";

event.stopPropagation();

return false;
}

Это не работает, поэтому я думаю, что что-то не так в отбрасывании функции javascript.Но я не вижу, что (до этого я никогда не работал с js).

Спасибо за помощь.

1 Ответ

1 голос
/ 23 марта 2011

Я буду следовать этому хорошему совету и использовать вместо этого jquery.Я нашел здесь демо и код, который мне нужен: jQuery UI - перетаскиваемая демка .

...