gpt4 book ai didi

javascript - dojo 中的 Drop 事件不适用于 dojo/on

转载 作者:行者123 更新时间:2023-11-29 15:18:06 25 4
gpt4 key购买 nike

我正在尝试使用 dojo 创建一个拖放列表。拖放工作正常,但是当我尝试在触发 DndDrop、DragStart 和使用 dojo/query 和 dojo 拖放相关的类似事件后编写任何功能时/on...事件未处理。同样...单击同一 NodeList 的事件工作正常。请指出我的错误。

<!DOCTYPE html>
<html>
<head>
<title>clac</title>
<link rel="stylesheet" type="text/css" href="calcdojo.css">
</head>
<body>
<ul>
<li id="operand1" class="container dropArea"></li>
<li id="operator1" class=" container dropArea"></li>
<li id="operand2" class=" container dropArea"></li>
<li id="result"></li>
</ul>

<ul id="sourcelist" class="container">
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/dojo.js"></script>
<script type="text/javascript">
require(["dojo/dom-style","dojo/dom-construct","dojo/dnd/Source","dojo/dnd/Source","dojo/query","dojo/on","dojo/domReady!"],function(domStyle,domConstruct,Source,Source,query,on){
var sourcelist = new Source('sourcelist',{accept:[""]});
sourcelist.copyOnly = true;
sourcelist.insertNodes(false,[
{data: "1",type:["operand"]},
{data: "2",type:["operand"]},
{data: "3",type:["operand"]},
{data: "+",type:["operator"]}]);

var operand1 = new Source('operand1',{accept:["operand"]});
var operand2 = new Source('operand2',{accept:["operand"]});
var operator1 = new Source('operator1',{accept:["operator"]});

var dropArea = query(".dropArea");
dropArea.on("DndDrop",function(event){
event.preventDefault();
console.log("dropped");
});

});
</script>
</body>
</html>

(我这里的需求是显示“dropped”)

最佳答案

解释是dropArea nodeList中的dom节点不存在“onDrop”事件。

在为 operand1 目标执行所需操作(显示“已删除”)的修改后的源代码下方:

<!DOCTYPE html>
<html>
<head>
<title>clac</title>
<link rel="stylesheet" type="text/css" href="calcdojo.css">
</head>
<body>
<ul id="targetList" class="container">
<li id="operand1" class="container dropArea"></li>
<li id="operator1" class=" container dropArea"></li>
<li id="operand2" class=" container dropArea"></li>
<li id="result"></li>
</ul>

<ul id="sourcelist" class="container">
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.12.2/dojo/dojo.js"></script>
<script type="text/javascript">
require(["dojo/dom-style","dojo/dom-construct","dojo/dnd/Source","dojo/dnd/Target","dojo/query","dojo/on", "dojo/aspect", "dojo/domReady!"],function(domStyle,domConstruct,Source,Target,query,on, aspect){
var sourcelist = new Source('sourcelist',{accept:[""]});
sourcelist.copyOnly = true;
sourcelist.insertNodes(false,[
{data: "1",type:["operand"]},
{data: "2",type:["operand"]},
{data: "3",type:["operand"]},
{data: "+",type:["operator"]}]);

var operand1 = new Target('operand1',{accept:["operand"]});
var operand2 = new Target('operand2',{accept:["operand"]});
var operator1 = new Target('operator1',{accept:["operator"]});

//var dropArea = query(".dropArea");
//dropArea.on("DndDrop",function(event){
//on(operand, "onDrop",function(){
aspect.after(operand1, "onDrop",function(){
console.log("dropped");
});

});
</script>
</body>
</html>

我尝试使用 dojo/on - 声明 on(operand, "onDrop",function(){ 我注释掉了 - 这没有用。我认为这是因为尽管文档调用了 onDrop dojo/DnD Source 类的一个事件,它实际上是该类的一个方法,因此使用了 target.after。参见 here用于讨论 dojo/on 和 dojo/target 之间的区别。

您必须对其他目标重复此操作。

(我还将重复的“dojo/dnd/Source”/Source require parameter association 更改为“dojo/dnd/Target”/Target)。

关于javascript - dojo 中的 Drop 事件不适用于 dojo/on,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46878311/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com