Native HTML5 Drag & Drop and Click event

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>