原生HTML5拖放事件

Question

為了更改它們的順序，我有一些可拖動元素（draggable =“ true”），我想使用jQuery向這些元素添加“ click”事件，但我嘗試過，但無法獲取。 是否可以向本地HTML5可拖動元素添加單擊或雙擊事件？ 有人可以幫我。

 var dragSrcEl = null; function handleDragStart(e) { // Target (this) element is the source node. dragSrcEl = this; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/html', this.outerHTML); this.classList.add('dragElem'); } function handleDragOver(e) { if (e.preventDefault) { e.preventDefault(); // Necessary. Allows us to drop. } this.classList.add('over'); e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object. return false; } function handleDragEnter(e) { // this / e.target is the current hover target. } function handleDragLeave(e) { this.classList.remove('over'); // this / e.target is previous target element. } function handleDrop(e) { // this/e.target is current target element. if (e.stopPropagation) { e.stopPropagation(); // Stops some browsers from redirecting. } // Don't do anything if dropping the same column we're dragging. if (dragSrcEl != this) { // Set the source column's HTML to the HTML of the column we dropped on. //alert(this.outerHTML); //dragSrcEl.innerHTML = this.innerHTML; //this.innerHTML = e.dataTransfer.getData('text/html'); this.parentNode.removeChild(dragSrcEl); var dropHTML = e.dataTransfer.getData('text/html'); this.insertAdjacentHTML('beforebegin',dropHTML); var dropElem = this.previousSibling; addDnDHandlers(dropElem); } this.classList.remove('over'); return false; } function handleDragEnd(e) { // this/e.target is the source node. //this.classList.remove('over'); [].forEach.call(pills, function (pill) { pill.classList.remove('over'); }); this.style.opacity = '1'; } function addDnDHandlers(elem) { elem.addEventListener('dragstart', handleDragStart, false); elem.addEventListener('dragenter', handleDragEnter, false) elem.addEventListener('dragover', handleDragOver, false); elem.addEventListener('dragleave', handleDragLeave, false); elem.addEventListener('drop', handleDrop, false); elem.addEventListener('dragend', handleDragEnd, false); } var pills = document.querySelectorAll('#tabs .tab'); [].forEach.call(pills, addDnDHandlers); $('.tab').click(function(event) { event.preventDefault(); alert( "Tab is clicked" ); }); 

 [draggable] { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; /* Required to make elements draggable in old WebKit */ -khtml-user-drag: element; -webkit-user-drag: element; } #tabs { list-style-type: none; } .tab { width: 162px; padding-bottom: 5px; padding-top: 5px; text-align: center; cursor: move; } .tab span { height: 20px; width: 150px; color: black; background-color: #ccc; padding: 5px; border-bottom: 1px solid #ddd; border-radius: 10px; border: 2px solid #666666; } .tab.dragElem { opacity: 0.4; } .tab.over { //border: 2px dashed #000; border-left: 5px solid red; } li{ float:left; margin-right:20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="tabs"> <li class="tab" draggable="true"><span>1</span></li> <li class="tab" draggable="true"><span>2</span></li> <li class="tab" draggable="true"><span>3</span></li> <li class="tab" draggable="true"><span>4</span></li> <li class="tab" draggable="true"><span>5</span></li> </ul> 

謝謝您最好的問候。

Answer 1

我還沒有閱讀完所有代碼，但似乎您的元素正在被重新創建。 要解決該問題，您可以通過以下方式進行onclick：

$('#tabs').on('click', '.tab', function(event) {
  event.preventDefault();
  alert( "Tab is clicked" );
});

這樣，通過類tab動態添加到<ul id="tabs">任何元素都是可單擊的。 在這里可以找到很好的解釋。

 var dragSrcEl = null; function handleDragStart(e) { // Target (this) element is the source node. dragSrcEl = this; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/html', this.outerHTML); this.classList.add('dragElem'); } function handleDragOver(e) { if (e.preventDefault) { e.preventDefault(); // Necessary. Allows us to drop. } this.classList.add('over'); e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object. return false; } function handleDragEnter(e) { // this / e.target is the current hover target. } function handleDragLeave(e) { this.classList.remove('over'); // this / e.target is previous target element. } function handleDrop(e) { // this/e.target is current target element. if (e.stopPropagation) { e.stopPropagation(); // Stops some browsers from redirecting. } // Don't do anything if dropping the same column we're dragging. if (dragSrcEl != this) { // Set the source column's HTML to the HTML of the column we dropped on. //alert(this.outerHTML); //dragSrcEl.innerHTML = this.innerHTML; //this.innerHTML = e.dataTransfer.getData('text/html'); this.parentNode.removeChild(dragSrcEl); var dropHTML = e.dataTransfer.getData('text/html'); this.insertAdjacentHTML('beforebegin',dropHTML); var dropElem = this.previousSibling; addDnDHandlers(dropElem); } this.classList.remove('over'); return false; } function handleDragEnd(e) { // this/e.target is the source node. //this.classList.remove('over'); [].forEach.call(pills, function (pill) { pill.classList.remove('over'); }); this.style.opacity = '1'; } function addDnDHandlers(elem) { elem.addEventListener('dragstart', handleDragStart, false); elem.addEventListener('dragenter', handleDragEnter, false) elem.addEventListener('dragover', handleDragOver, false); elem.addEventListener('dragleave', handleDragLeave, false); elem.addEventListener('drop', handleDrop, false); elem.addEventListener('dragend', handleDragEnd, false); } var pills = document.querySelectorAll('#tabs .tab'); [].forEach.call(pills, addDnDHandlers); $('#tabs').on('click', '.tab', function(event) { event.preventDefault(); alert( "Tab is clicked" ); }); 

 [draggable] { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; /* Required to make elements draggable in old WebKit */ -khtml-user-drag: element; -webkit-user-drag: element; } #tabs { list-style-type: none; } .tab { width: 162px; padding-bottom: 5px; padding-top: 5px; text-align: center; cursor: move; } .tab span { height: 20px; width: 150px; color: black; background-color: #ccc; padding: 5px; border-bottom: 1px solid #ddd; border-radius: 10px; border: 2px solid #666666; } .tab.dragElem { opacity: 0.4; } .tab.over { //border: 2px dashed #000; border-left: 5px solid red; } li{ float:left; margin-right:20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="tabs"> <li class="tab" draggable="true"><span>1</span></li> <li class="tab" draggable="true"><span>2</span></li> <li class="tab" draggable="true"><span>3</span></li> <li class="tab" draggable="true"><span>4</span></li> <li class="tab" draggable="true"><span>5</span></li> </ul>