原生HTML5拖放事件

Question

I have elements that are draggables (draggable="true") in order to change the order of them and I would want to add to these elements a "click" event with jQuery, I have tried but I can´t get it. Its possible to add a click or double click event to a native HTML5 draggable element? Someone could help me please.

 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> 

Thank you Best regards.

Answer 1

I haven't read through all your code, but it seems like your elements are getting re-created on drop. To solve that problem, you can do your onclick this way:

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

This way any elements dynamically added to the <ul id="tabs"> with the class tab will be clickable. A good explanation can be found here .

 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>