我想在拖动一个对象并悬停可放置对象时添加可放置事件侦听器。
这是我的代码:
$('.will-be-drag').draggable({
helper: 'clone',
drag: function (event, ui) {
$('.will-be-drop').hover(function () {
$(this).droppable({
drop: function (event, ui) {
let item = ui.draggable;
console.log(item[0])
item.detach().appendTo($(this));
}
});
}, function () {
$(this).droppable('disable');
});
}
});
我的HTML就是这样:
<div class="will-be-drag"></div>
<div class="will-be-drag"></div>
<div class="will-be-drag"></div>
<?php
for($i = 0; $i <= 3000; $i++){
?>
<div class="will-be-drop"></div>
<?php
}
?>
由于性能问题,我这样做。我有3k的可放置对象,拖动时冻结。它必须仅拖动
droppable
对象并悬停$('.will-be-drag')
来添加$('.will-be-drop')
事件监听器。使用此代码,它仅在悬停时添加,而在拖动时不添加。
我该怎么做?
我想让javascript呼吸,设置3k可放置对象时已经很晚了。只有30-40个可拖动元素。这是一张桌子。
最佳答案
这是一个悬停示例:
$(function() {
$("#draggable").draggable();
$("#droppable").droppable({
drop: function(event, ui) {
$(this)
.find("p")
.html("Dropped!");
}
}).hover(function(e) {
// IN
$(this)
.addClass("ui-state-highlight");
}, function(e) {
// OUT
$(this)
.removeClass("ui-state-highlight");
});
});
#draggable {
width: 100px;
height: 100px;
padding: 0.5em;
float: left;
margin: 10px 10px 10px 0;
}
#droppable {
width: 150px;
height: 150px;
padding: 0.5em;
float: left;
margin: 10px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>Drop here</p>
</div>
您可以看到,将鼠标悬停在可放置对象上时,它会突出显示。当您拖动时,它不会。我怀疑事件不能在持久性
hover
事件上冒泡。建议如下:
$(function() {
function makeDrops(n) {
var t = $(".ui-widget").eq(1);
for (var i = 1; i <= n; i++) {
$("<div>", {
id: "drop-" + i,
class: "will-be-drop ui-widget-content"
}).appendTo(t);
}
}
function inViewport(element, detectPartial) {
element = $(element);
detectPartial = (!!detectPartial); // if null or undefined, default to false
var viewport = $(window),
vpWidth = viewport.width(),
vpHeight = viewport.height(),
vpTop = viewport.scrollTop(),
vpBottom = vpTop + vpHeight,
vpLeft = viewport.scrollLeft(),
vpRight = vpLeft + vpWidth,
elementOffset = element.offset(),
elementTopArea = elementOffset.top + ((detectPartial) ? element.height() : 0),
elementBottomArea = elementOffset.top + ((detectPartial) ? 0 : element.height()),
elementLeftArea = elementOffset.left + ((detectPartial) ? element.width() : 0),
elementRightArea = elementOffset.left + ((detectPartial) ? 0 : element.width());
return ((elementBottomArea <= vpBottom) && (elementTopArea >= vpTop)) && ((elementRightArea <= vpRight) && (elementLeftArea >= vpLeft));
}
function markVisible(c) {
c.each(function(i, el) {
if (inViewport(el, true)) {
$(el).addClass("visible");
}
});
}
makeDrops(3000);
$(".will-be-drop").droppable({
drop: function(event, ui) {
let item = ui.draggable;
console.log("Drag Item " + item.text().trim() + " dropped to " + $(this).attr("id"));
item.detach().appendTo($(this));
},
over: function() {
$(this).addClass("ui-state-highlight");
},
out: function() {
$(this).removeClass("ui-state-highlight");
}
}).droppable("disable");
$('.will-be-drag').draggable({
helper: 'clone',
start: function(e, ui) {
markVisible($(".will-be-drop"));
$(".will-be-drop.visible").droppable("enable");
},
drag: function(e, ui) {
$(".will-be-drop.visible").droppable("disable").removeClass("visible");
markVisible($(".will-be-drop"));
$(".will-be-drop.visible").droppable("enable");
},
stop: function(e, ui) {
$(".will-be-drop").droppable("disable");
$(".will-be-drop.ui-state-highlight").removeClass("ui-state-highlight");
}
});
});
.will-be-drag {
width: 50px;
height: 50px;
padding: 0.25em;
float: left;
margin: 10px 10px 10px 0;
}
.will-be-drop {
width: 100px;
height: 100px;
padding: 0.25em;
float: left;
margin: 10px;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
<div class="will-be-drag ui-widget-content">A</div>
<div class="will-be-drag ui-widget-content">B</div>
<div class="will-be-drag ui-widget-content">C</div>
</div>
<div class="ui-widget">
</div>
您还可以使用
mousedown
或其他一些条件将其初始化为可丢弃的,以减少内存开销。请记住也要销毁它们,否则当用户在拖动时在页面中移动时,只会堆积内存问题。