Перетаскиваемый элемент в javascript

Question

Если я хочу сделать div draggable, я должен указать родительский объект или нет? Например, в jquery, когда элемент перетаскивается, имеет ли он родитель ссылки?

Answer 1

Чтобы перетащить элемент, вам просто нужно добавить атрибут draggable и установить его значение равным true.

Это не будет работать на древних браузерах, таких как Internet Explorer 8 или более ранних версий, потому что атрибут draggable не поддерживается и не поддерживается ими.

Что вы, вероятно, думаете о цели падения. По умолчанию элементы не могут быть удалены внутри других элементов.

Важно отметить, что для следующих событий перетаскивания требуется параметр event.

• ondrag: Событие вызывается всякий раз, когда элемент перетаскивается

• ondragstart - Событие вызывается, когда процесс перетаскивания запускается

• ondragend - Событие срабатывает когда процесс перетаскивания завершен

• OnDragEnter - Событие вызывается, когда тащили элемент входит в цель снижения

• OnDragLeave - Событие вызывается, когда тащили элемент оставляет цель снижения

• OnDragOver - Событие срабатывает, когда тащили элемент находится над целью снижения

Чтобы разрешить падение, мы должны изменить поведение по умолчанию браузеров через event.preventDefault.

Этот пример любезно предоставлен W3Schools. Однако это объясняет функциональность перетаскивания. К сожалению, для перетаскивания событий нет pseudo classes, поэтому нам нужно использовать собственный JavaScript.

http://www.w3schools.com/jsref/event_ondragstart.asp

var demo = document.getElementById("demo"); 
 

 
// Use dataTransfer.setData() to set data type and value of dragged data 
 
// When dragging starts, the paragraph will output text and opacity will decrease 
 
document.addEventListener("dragstart", function(event) { 
 
    event.dataTransfer.setData("Text", event.target.id); 
 
    demo.innerHTML = "Started to drag the p element."; 
 
    event.target.style.opacity = "0.4"; 
 
}); 
 

 
document.addEventListener("drag", function(event) { 
 
    demo.style.color = "red";     // Change color of output text 
 
}); 
 

 
// Output some text when finished dragging the p element and reset the opacity 
 
document.addEventListener("dragend", function(event) { 
 
    demo.innerHTML = "Finished dragging the p element."; 
 
    event.target.style.opacity = "1"; 
 
}); 
 

 

 
/* Events fired on the drop target */ 
 

 
// When the draggable p element enters the droptarget, change the DIVS's border style 
 
document.addEventListener("dragenter", function(event) { 
 
    if (event.target.className == "droptarget") { 
 
     event.target.style.border = "3px dotted red"; 
 
    } 
 
}); 
 

 
// By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element 
 
document.addEventListener("dragover", function(event) { 
 
    event.preventDefault(); 
 
}); 
 

 
// When the draggable p element leaves the droptarget, reset the DIVS's border style 
 
document.addEventListener("dragleave", function(event) { 
 
    if (event.target.className == "droptarget") { 
 
     event.target.style.border = ""; 
 
    } 
 
}); 
 

 
/* On drop - Prevent the browser default handling of the data (default is open as link on drop) 
 
    Reset the color of the output text and DIV's border color 
 
    Get the dragged data with the dataTransfer.getData() method 
 
    The dragged data is the id of the dragged element ("drag1") 
 
    Append the dragged element into the drop element 
 
*/ 
 
document.addEventListener("drop", function(event) { 
 
    event.preventDefault(); 
 
    if (event.target.className == "droptarget") { 
 
     demo.style.color = ""; 
 
     event.target.style.border = ""; 
 
     var data = event.dataTransfer.getData("Text"); 
 
     event.target.appendChild(document.getElementById(data)); 
 
    } 
 
});

.droptarget { 
 
    float: left; 
 
    width: 100px; 
 
    height: 35px; 
 
    margin: 15px; 
 
    padding: 10px; 
 
    border: 1px solid #aaaaaa; 
 
}

<p>Drag the p element back and forth between the two rectangles:</p> 
 

 
<div class="droptarget"> 
 
    <p draggable="true" id="dragtarget">Drag me!</p> 
 
</div> 
 

 
<div class="droptarget"></div> 
 

 
<p style="clear:both;"><strong>Note:</strong> drag events are not supported in Internet Explorer 8 and earlier versions or Safari 5.1 and earlier versions.</p> 
 

 
<p id="demo"></p>