html5怎么判断父子元素,javascript – HTML5从子元素拖放父元素

你必须以相反的方式解决这个问题.

在div上设置ondragstart,然后当用户点击div时,为li设置draggable为true.当drop set draggable回到false时.这样,只有在用户使用重新排序div时才会进行拖动.

您只需将对象注册到全局范围即可

function dragStart(event) {

globalDraggedElement = this.parentElement;

this.parentElement.draggable = true;

}

function dragOver(event) {

if (globalDraggedElement != this) {

//If the element is not the dragged element, show mouse drop cursor.

//Else show forbidden to drop cursor, by default.

event.preventDefault();

}

}

function dragDrop(event) {

if (globalDraggedElement != this) {

//perform action!

}

globalDraggedElement.draggable = false;

//Delete the element from the global scope.

delete globalDraggedElement;

}

function dragEnd(event) {

this.draggable = false;

}

var liElement = document.querySelectorAll("li[draggable='true']");

for (var i = 0; i < liElement.length; ++i) {

liElement[i].children[0].addEventListener('dragstart', dragStart, false);

liElement[i].addEventListener('dragenter', dragOver, false);

liElement[i].addEventListener('dragover', dragOver, false);

liElement[i].addEventListener('drop', dragDrop, false);

liElement[i].addEventListener('dragend', dragEnd, false);

}

请使用addEventListeners添加事件.我使用document.querySelectorAll来选择draggable属性设置为true的所有li元素. helpful article at MDN

dragdrop