HTML5拖放行為
[英]HTML5 drag & drop behaviour
問題描述
我正在廣泛使用HTML5本機拖放，它幾乎完全表現自己，只有一個小例外。
當任何東西被拖到頁面上時，我正在嘗試突出顯示我的下拉區域。 我最初試圖通過在文檔體上放置jQuery偵聽器來實現這一點，如下所示：
$("body").live('dragover',function(event){lightdz(event)});
$("body").live('dragexit dragleave drop',function(event){dimdz(event)});
使用lightdz（）和dimdz（）更改頁面上所有dropzones的背景顏色樣式屬性，使它們脫穎而出。 這沒用。 每當拖動的對象進入頁面上的子元素（如div容器）時，偵聽器就會將其標記為dragleave事件並使dropzones變暗。
我通過將偵聽器應用於頁面上的所有可見元素而不僅僅是正文來解決這個問題。 當它跨越一個元素和另一個元素之間的邊界時，它們偶爾會出現輕微的可見閃爍，但它看起來很好。
無論如何，現在我已經改變了lightdz（）和dimdz（），以便他們將快速的jQuery fadeTo（）動畫應用到所有非dropzones。 這在它工作時看起來很棒 ，並且使用戶非常清楚他們可以做什么，也不能放棄。 麻煩的是當它在元素邊界之間傳遞時，它應用淡入淡出動畫。 這比背景顏色的偶然閃爍要明顯得多，特別是因為如果對象被快速拖過多個邊界，它將對動畫進行排隊並使頁面反復淡入淡出。
即使我不打擾fadeTo（）動畫，只是改變不透明度，它比背景顏色閃爍更明顯，因為整個頁面改變而不僅僅是dropzone元素。
有沒有辦法將整個頁面作為單一元素引用以用於dragover和dragleave事件？ 如果失敗了，有沒有辦法檢測在瀏覽器窗口之外發生的丟棄？ 如果我跳過dragleave事件，它看起來很好，但如果任何對象被拖過瀏覽器窗口然后掉到它外面，整個頁面都會褪色。
3 個解決方案
解決方案1
13 已采納 2011-03-20 20:03:13
我真的很尷尬，這是多么容易。
$("*:visible").live('dragenter dragover',function(event){lightdz(event)});
$("#page").live('dragleave dragexit',function(event)
{
if(event.pageX == "0")
dimdz(event);
});
$("*:visible").live('drop',function(event){dimdz(event)});
#page是一個頁面范圍的容器。 如果dragleave事件將拖動的對象移到瀏覽器窗口之外，則event.pageX的值為0.如果它在其他任何地方發生，則它將具有非零值。
解決方案2
2 2011-03-20 17:52:16
我可能在這里變得過於復雜，但我會做這樣的事情：
var draggingFile = false;
var event2;
//elements with the class hotspots are OK
var hotspots = $(".hotspots");
//Handlers on the body for drag start & stop
$("body").live("dragover", function(event){ draggingFile = true; event2 = event; });
$("body").live("dragexit dragleave drop", function(event){ draggingFile = false; event2 = event; });
//Function checks to see if file is being dragged over an OK hotspot regardless of other elements infront
var isTargetOK = function(x, y){
hotspots.each(function(i, el){
el2 = $(el);
var pos = el2.offset();
if(x => pos.left && x <= pos.left+el2.width() && y => pos.top && y <= post.top+el2.height()){
return true;
}
});
return false;
};
//Mousemove handler on body
$("body").mousemove(function(e){
//if user is dragging a file
if(draggingFile){
//Check to see if this is an OK element with mouse X & Y
if(isOKTarget(e.pageX, e.pageY)){
//Light em' up!
lightdz(event2);
} else { /* Fade em' :( */ dimdz(event2); }
} else {
dimdz(); //Having no parematers means just makes sure hotspots are off
}
});
順便說一句，這可能不會直接起作用，所以你必須稍微調整一下才能使用你的代碼。
解決方案3
1 2011-12-10 20:36:35
我在這里嘗試了接受的解決方案，但最終使用setTimeout來克服這個問題。 我在頁面范圍內容器阻塞drop元素時遇到了很多麻煩，如果它在頂部浮動，並且如果它是drop元素仍然會導致問題。
<body style="border: 1px solid black;">
<div id="d0" style="border: 1px solid black;"> </div>
<div id="d1" style="border: 1px solid black; display: none; background-color: red;">-> drop here <-</div>
<div id="d2" style="border: 1px solid black;"> </div>
<div style="float: left;">other element</div>
<div style="float: left;"> - </div>
<div style="float: left;">another element</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
<script type="text/javascript">
var resetTimer;
var f = function(e)
{
if (e.type == "dragover")
{
e.stopPropagation();
e.preventDefault();
if (resetTimer)
{
clearTimeout(resetTimer);
}
document.getElementById('d1').style.display = '';
}
else
{
var f = function()
{
document.getElementById('d1').style.display = 'none';
};
resetTimer = window.setTimeout(f, 25);
}
};
document.body.addEventListener("dragover", f, true);
document.body.addEventListener("dragleave", f, true);
document.getElementById('d1').addEventListener("drop", function(e){ f(); alert('dropped'); }, false);
</script>
如果你只是調用f(); 而不是window.setTimeout(f, 250); ，你會看到一些令人討厭的閃爍的元素顯示和隱藏。
http://jsfiddle.net/guYWx/
意外的HTML5拖放鬼影像行為
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.