javascript - native HTML5 拖放和单击事件

Question

我有可拖动的元素(draggable =“true”)，以便更改它们的顺序，我想用 jQuery 添加到这些元素的“单击”事件，我已经尝试过，但我无法得到它。是否可以向 native 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" );
});

这样任何元素都会动态添加到 <ul id="tabs">与类(class)tab将是可点击的。很好的解释可以参见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>