问题描述
我正在使用 jquery sortable 在我的网络应用程序上对我的照片进行排序,它完美地按照要求完成了这项工作。但是,我无法在可排序列表项的元素(这里是图像)上触发 click()
或 dblclick()
或 on('click')
,基本上是任何点击事件。
HTML
<ul id="sortable" class="reorder-gallery mt-5">
<li class="ui-state-default mediaSort" id="1" data-name="1.png">
<img src="images/1.jpg" alt="">
</li>
<li class="ui-state-default mediaSort" id="2" data-name="2.png">
<img src="images/2.jpg" alt="">
</li>
<li class="ui-state-default mediaSort" id="3" data-name="3.png">
<img src="images/3.jpg" alt="">
</li>
<li class="ui-state-default mediaSort" id="4" data-name="4.png">
<img src="images/4.jpg" alt="">
</li>
</ul>
JS
// JQUERY SORTABLE
$("#sortable").sortable({
axis: 'x,y',containment: "parent",tolerance:'pointer',update: function(event,ui) {
var item_order = new Array();
$('ul.reorder-gallery li').each(function() {
item_order.push($(this).attr("id"));
});
$.ajax({
type: "POST",url: "processes/sort.PHP",data: 'order='+item_order,cache: false,success: function(data){}
});
}
}).disableSelection();
// DOUBLE CLICK TO DELETE IMAGE (NOT WORKING)
$(".mediaSort").dblclick(function(){
alert("Double Clicked!!");
});
上面的双击功能不起作用。但是,为了测试,我尝试完全注释掉上面的 Sortable 函数以使其无效。瞧!双击工作完美。这意味着 Sortable 函数正在阻止点击事件触发。有什么解决办法吗?
解决方法
似乎 Touch Punch 不能很好地处理“双击”,如果我没看错的话:https://github.com/furf/jquery-ui-touch-punch/issues/25
考虑一下:jQuery on 'double click' event (dblclick for mobile)
我创建了以下小提琴用于测试:
https://jsfiddle.net/Twisty/uhyzgaL7/
移动测试:
https://jsfiddle.net/Twisty/uhyzgaL7/show/
JavaScript
$(function() {
function myLog(string) {
$("#log").prepend("<span>" + string + "</span>");
}
function doubleClick(event,callback) {
var touchtime = $(event.target).data("touch-time");
console.log("DC:",touchtime);
if (touchtime == undefined || touchtime == 0) {
// set first click
$(event.target).data("touch-time",new Date().getTime());
} else {
// compare first click to this click and see if they occurred within double click threshold
if (((new Date().getTime()) - touchtime) < 800) {
// double click occurred
console.log("DC Callback triggered");
callback();
$(event.target).data("touch-time",0);
} else {
// not a double click so set as a new first click
$(event.target).data("touch-time",new Date().getTime());
}
}
}
function removeItem(selector) {
var item = $(selector);
var parent = item.parent();
item.remove();
parent.sortable("refresh");
}
$("#sortable").sortable({
axis: 'x,y',containment: "parent",tolerance: 'pointer',update: function(event,ui) {
var item_order = $(this).sortable("toArray");
myLog("Array Created: " + item_order.toString());
$.ajax({
type: "POST",url: "processes/sort.php",data: {
list: "gallery",order: item_order
},cache: false,success: function(data) {
myLog("Success");
}
});
}
}).disableSelection();
// DOUBLE CLICK TO DELETE IMAGE (NOT WORKING)
/*
$(".mediaSort").dblclick(function(event) {
console.log("Double Click Detected");
myLog("Double Click " + $(this).attr("id"));
});
*/
$(".mediaSort").click(function(e) {
console.log(new Date().getMilliseconds());
var self = $(this).get(0);
doubleClick(e,function() {
myLog("Remove Item: " + $(self).attr("id"));
removeItem(self);
});
});
});
这在移动设备中确实有效,但在 Android 上使用 Chrome 进行测试。
我建议您为每个图标添加一个可以用作关闭/删除按钮的图标。请参阅:
https://jqueryui.com/droppable/#photo-manager
更新
您可以添加一个句柄,这样可以更好地解决问题。
示例:https://jsfiddle.net/Twisty/uhyzgaL7/68/
移动:https://jsfiddle.net/Twisty/uhyzgaL7/68/show/
HTML
<div class="ui-helper-clearfix">
<ul id="sortable" class="reorder-gallery mt-5">
<li class="ui-state-default mediaSort" id="item-1" data-name="1.png">
<h5>Item 1</h5>
<img src="https://dummyimage.com/100x100/cecece/2e2e2e.jpg&text=Item+1" alt="Item 1">
</li>
<li class="ui-state-default mediaSort" id="item-2" data-name="2.png">
<h5>Item 2</h5>
<img src="https://dummyimage.com/100x100/cecece/2e2e2e.jpg&text=Item+2" alt="Item 2">
</li>
<li class="ui-state-default mediaSort" id="item-3" data-name="3.png">
<h5>Item 3</h5>
<img src="https://dummyimage.com/100x100/cecece/2e2e2e.jpg&text=Item+3" alt="Item 3">
</li>
<li class="ui-state-default mediaSort" id="item-4" data-name="4.png">
<h5>Item 4</h5>
<img src="https://dummyimage.com/100x100/cecece/2e2e2e.jpg&text=Item+4" alt="Item 4">
</li>
</ul>
</div>
<div id="log">
</div>
JavaScript
$(function() {
function myLog(string) {
$("#log").prepend("<span>" + string + "</span>");
}
function doubleClick(event,handle: "h5",success: function(data) {
myLog("Success");
}
});
}
}).disableSelection();
// DOUBLE CLICK TO DELETE IMAGE (NOT WORKING)
$(".mediaSort").dblclick(function(event) {
console.log("Double Click Detected");
myLog("Double Click " + $(this).attr("id"));
removeItem(this);
});
/*
$(".mediaSort").click(function(e) {
console.log(new Date().getMilliseconds());
var self = $(this).get(0);
doubleClick(e,function() {
myLog("Remove Item: " + $(self).attr("id"));
removeItem(self);
});
});
*/
});