[英]Update available drop targets after dragstart fires in jquery.event.drag
概述:
我有一個使用jquery.event.drag和jquery.event.drop的頁面。 我需要能夠拖放到不斷添加到dom中的元素,即使在拖動開始之后也是如此。
問題:
當dragstart
事件觸發時,它會檢查可用的放置目標並將它們添加到拖動對象。
我dragstart
的問題是我在dragstart
事件觸發后動態添加drop目標,因此用戶無法刪除這些動態添加的drop目標。
例:
http://jsfiddle.net/blowsie/36AJq/
題:
如何更新拖動以允許在拖動開始后刪除已添加到dom的元素?
您可以使用此代碼段。
重要的功能是: $.event.special.drop.locate();
測試chrome / safari / firefox / ie9似乎工作。
UPDATE
對於重疊事件,請查看以下代碼是否有效。 我在匿名函數中設置它只是為了避免任何全局變量。 想法是使用event的currentTarget屬性來檢查相同的元素是否觸發相同的事件。 我在newdrop元素上設置了一個id,只是為了測試。
(function () {
var $body = $("body"),
newdrops = [],
currentTarget = {},
ondragstart = function () {
$(this).css('opacity', .75);
}, ondrag = function (ev, dd) {
$(this).css({
top: dd.offsetY,
left: dd.offsetX
});
}, ondragend = function () {
$(this).css('opacity', '');
for (var i = 0, z = newdrops.length; i < z; i++)
$(newdrops[i]).off('dropstart drop dropend').removeClass('tempdrop');
newdrops = [];
}, ondropstart = function (e) {
if (currentTarget.dropstart === e.currentTarget) return;
currentTarget.dropstart = e.currentTarget;
currentTarget.dropend = null;
console.log('start::' + e.currentTarget.id)
$(this).addClass("active");
}, ondrop = function () {
$(this).toggleClass("dropped");
}, ondropend = function (e) {
if (currentTarget.dropend === e.currentTarget) return;
currentTarget.dropend = e.currentTarget;
currentTarget.dropstart = null;
console.log('end::' + e.currentTarget.id)
$(this).removeClass("active");
};
$body.on("dragstart", ".drag", ondragstart)
.on("drag", ".drag", ondrag)
.on("dragend", ".drag", ondragend)
.on("dropstart", ".drop", ondropstart)
.on("drop", ".drop", ondrop)
.on("dropend", ".drop", ondropend);
var cnt = 0;
setInterval(function () {
var dataDroppables = $body.data('dragdata')['interactions'] ? $body.data('dragdata')['interactions'][0]['droppable'] : [];
var $newDrop = $('<div class="drop tempdrop" id="' + cnt + '">Drop</div>');
cnt++;
$("#dropWrap").append($newDrop);
var offset = $newDrop.offset();
var dropdata = {
active: [],
anyactive: 0,
elem: $newDrop[0],
index: $('.drop').length,
location: {
bottom: offset.top + $newDrop.height(),
elem: $newDrop[0],
height: $newDrop.height(),
left: offset.left,
right: offset.left + $newDrop.width,
top: offset.top,
width: $newDrop.width
},
related: 0,
winner: 0
};
$newDrop.data('dropdata', dropdata);
dataDroppables.push($newDrop[0]);
$newDrop.on("dropstart", ondropstart)
.on("drop", ondrop)
.on("dropend", ondropend);
$.event.special.drop.locate($newDrop[0], dropdata.index);
newdrops.push($newDrop[0]);
}, 1000);
})();
我無法使用jquery.event.drag和jquery.event.drop來實現這一點,但我確實使用了原生HTML5事件:
解決方案是綁定函數中的放置目標上的事件,並調用它來更新綁定。 我懷疑你可以使用類似的主體使用jquery.event.drag和jquery.event.drop。 如果我可以得到那些工作,我會更新我的答案。
這是JS:
$(function() {
var bind_targets = function() {
$(".drop").on({
dragenter: function() {
$(this).addClass("active");
return true;
},
dragleave: function() {
$(this).removeClass("active");
},
drop: function() {
$(this).toggleClass("dropped");
}
});
};
$("div[draggable]").on({
dragstart: function(evt) {
evt.originalEvent.dataTransfer.setData('Text', 'data');
},
dragend: function(evt) {
$('.active.drop').removeClass('active');
}
});
setInterval(function () {
$("#dropWrap").append('<div class="drop">Drop</div>');
// Do something here to update the dd.available
bind_targets();
}, 1000)
});
你不能。 在dragstart
,可能的拖放區域是從DOM計算的,並且在dragend
之前無法編輯。 即使不斷重新綁定.on()
(演示: http : //jsfiddle.net/36AJq/84/ )也無法提供所需的效果。
我有點不同地解決了這個問題。 (演示: http : //jsfiddle.net/36AJq/87/ )
<div>
開始。 opacity: 0
使其不可見, width: 0
以防止在隱藏時進行dropend
。 setInterval
顯示下一個隱藏的div( $('.drop:not(.visible)').first()
)每1000ms。 JS:
$("body")
.on("dragstart", ".drag", function () {
$(this).css('opacity', .75);
})
.on("drag", ".drag", function (ev, dd) {
$(this).css({
top: dd.offsetY,
left: dd.offsetX
});
})
.on("dragend", ".drag", function () {
$(this).css('opacity', '');
})
.on("dropstart", ".drop", function () {
$(this).addClass("active");
})
.on("drop", ".drop", function () {
$(this).toggleClass("dropped");
})
.on("dropend", ".drop", function () {
$(this).removeClass("active");
});
setInterval(function () {
$('.drop:not(.visible)').first()
.addClass('visible').removeClass('hidden');
}, 1000)
為什么不將所有div放入頁面並將其可見性設置為隱藏? 然后使用setInterval()每秒更改每個人的可見性。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.