我已经在项目列表上设置了拖放,以便用户可以将项目拖放到预览窗格中并查看其内容。如预期的那样,光标将更改为预期的“重影”图像,并且一切正常。
以前,在同一应用程序中,我创建了自定义滚动条,这些滚动条通过将mousemove和mouseup嵌套在滚动条上的mousedown内而起作用。当鼠标移动时,页面滚动。仍然可以正常工作。
但是 滚动后,预览系统的拖放光标被弄乱了:它不再更改为预期的光标和附加的幻像。
我怀疑滚动(在滚动条的“轨道”上上下拖动“ scrubber”)以某种方式触发了html5 d&d系统。我尝试将e.preventDefault放在滚动条中的几乎所有位置都无效。 / p>
我猜想在滚动时需要以某种方式禁用html5 d&d,或者愚弄以为滚动条虽然不是真正的拖放,但实际上已经完成或重置了所有标志,或者满足了d&d的任何期望系统已完成操作。
作为测试,我将html5 d&d用于滚动条(但由于在拖动时光标发生了变化,看起来很奇怪),并且可以预期,项目预览d&d在所有预期的光标行为下均可正常工作。
任何有关如何重置以便d&d光标正确显示的建议,将不胜感激。
代码在Edge Animate框架中,以下是关键片段:
//scrollbar code
Symbol.bindElementAction(compId, symbolName, "${scrubber}", "mouseenter", function(sym, e) {
sym.$("scrubber").attr("draggable", "false");
return false; ///
});
Symbol.bindElementAction(compId, symbolName, "${scrubber}", "mousedown", function(sym, e) {
e.preventDefault();
e.stopPropagation();
var scrubber = sym.$("scrubber");
var mouseButton = e.button;
if(mouseButton == 2){
return false;
}
var doMoveAtEnd = false;
canDrag = true;
sym.$("Hithilite").show();
var barProp = voodoo.scrollbarCalc("", "vertical", "verticalscroll.scrubber.init");
getStage().getSymbol("Domtop").$("Domtopreduced").mousemove(function(e){
e.preventDefault();
e.stopPropagation();
if(mouseButton !== 2 && canDrag){
isDrag = true;
var pos = 0;
var currOffsetY = scrubber.offset().top;
var possibleY = e.pageY;
if(possibleY > currOffsetY){
scrollDir = "up";
}
else if(possibleY < currOffsetY){
scrollDir = "down";
}
pos = pos + possibleY;
if(pos !== 0){
scrollProp = voodoo.scrollbarCalc(e, "vertical", "verticalscroll.scrubber.2");
voodoo.viewScroll(e, "mousedrag", scrollDir, scrollProp[7]);
}
pos = 0;
}
}
return false;
});
getStage().getSymbol("Domtop").$("Domtopreduced").mouseup(function(e){
e.preventDefault();
e.stopPropagation();
var mouseButton = e.button;
if(mouseButton !== 2){
isDrag = false;
canDrag = false;
setVar("scrubber", "");
}
return false;
});
return false;
});
//Preview drag & drop
//drag source
sym.$("hotspotfocus").attr("draggable", "true");
Symbol.bindElementAction(compId, symbolName, "${hotspotfocus}", "dragstart", function(sym, e) {
if(getVar("hardpreview") == "off"){
return false;
}
setVar("dragDropItem", e.target.id);
setVar("isDrag", true);
});
//drag target
Symbol.bindElementAction(compId, symbolName, "${hpvslot1}", "dragover", function(sym, e) {
e.preventDefault();
e.stopPropagation();
if(getVar("hpvslot1") === ""){
sym.$("hpvslot1BG").fadeTo(0, 0.5);
}
else{
sym.$("hpvslot1BG").show();
}
return false; ///
});
Symbol.bindElementAction(compId, symbolName, "${hpvslot1}", "drop", function(sym, e) {
e.preventDefault();
e.stopPropagation();
sym.$("hpvslot1BG").fadeTo(0, 1);
voodoo.hpvDrop("hpvslot1");
return false; ///
});
Symbol.bindElementAction(compId, symbolName, "${hpvslot1}", "dragleave", function(sym, e) {
e.stopPropagation();
e.preventDefault();
if(getVar("hpvslot1") !== ""){
sym.$("hpvslot1BG").hide();
}
else{
sym.$("hpvslot1BG").fadeTo(0, 1);
}
});
Symbol.bindElementAction(compId, symbolName, "${hpvslot1}", "dragend", function(sym, e) {
e.preventDefault();
sym.$("hpvslot1BG").hide();
});
答案 0 :(得分:0)
偶然发现答案。
事实证明,一旦拖动器激活了滚动条的鼠标移动(即,第一次通过拖动滚动),滚动条的mousemove功能将保持激活状态,并且在视图中的任何位置滚动都将触发鼠标移动。
这种无意的触发操作破坏了html5拖放中的正确光标响应。
通过在较低级别停止传播,可以防止这种情况发生(即使洗涤器上的鼠标按钮未“按下”,也会在滚动条中触发该事件)。
出乎意料!
从本质上讲,这里的问题是,即使有问题的mousemove处理程序嵌套在除非触发了封闭的mousedown的情况下您都不认为会触发的情况下,但它始终是在第一次触发后始终被触发触发,无论鼠标是否按下。
答案是只有 个与元素连接的mousemove处理程序...