我有可拖动的元素(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>
谢谢 最好的问候。
答案 0 :(得分:1)
我还没有阅读您的所有代码,但似乎您的元素正在重新创建。要解决这个问题,你可以这样点击:
hostname
这样,动态添加到$('#tabs').on('click', '.tab', function(event) {
event.preventDefault();
alert( "Tab is clicked" );
});
类<ul id="tabs">
的所有元素都是可点击的。可以找到一个很好的解释here。
tab
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;
}