个人中心
gpt4 book ai didi

javascript - dojo - mouse(x, y) - 拖放 - 沮丧

转载 作者：行者123 更新时间：2023-11-30 18:57:46 26 4
gpt4 key购买 nike

我正在尝试使用 dojo.dnd 拖动一个对象，但希望头像与对象处于相同的位置(相对于鼠标)

即如果有人在对象的中间单击，则鼠标光标将位于头像的中间。

我得到了各种奇怪的结果。如果我将一个函数连接到 body.onmousemove，dnd 的放置部分将失败。

我怎样才能让它工作？

<html>
<head>
<title>DnD Events</title>
<style type="text/css">
.target
{
border: 1px dotted gray;
width: 300px;
height: 300px;
padding: 5px;
-moz-border-radius: 8pt 8pt;
radius: 8pt;
}
.source
{
border: 1px dotted skyblue;
height: 200px;
width: 300px;
-moz-border-radius: 8pt 8pt;
radius: 8pt;
}
.dojoDndItemOver
{
background: #feb;
border: 1px dotted gray;
}


.target .dojoDndItemAnchor
{
background: #ededed;
border: 1px solid gray;
}
.dojoDndAvatarHeader {
display: none;
}
</style>
<script type="text/javascript" src="dojo/dojo.js" djconfig="parseOnLoad: true, isDebug:false"></script>
<script type="text/javascript">
dojo.require("dojo.dnd.Source");
dojo.require("dojo.dnd.Container");
dojo.require("dojo.dnd.Moveable");
dojo.require("dojo.dnd.Manager");
dojo.require("dojo.dnd.Avatar");

var mouse = { x: 0, y: 0 , handle:undefined};
function mouseCoords(ev) {
var px, py;
ev = ev || window.event;
if (ev.pageX || ev.pageY) {
px = ev.pageX; py = ev.pageY;
} else {
px = ev.clientX + dojo.body().scrollLeft - dojo.body().clientLeft;
py = ev.clientY + dojo.body().scrollTop - dojo.body().clientTop;
}


mouse = { x: px, y: py };
// dojo.byId("msg").innerHTML = dojo.toJson(mouse);


}
//dnd WORKS when following lines are commented out. (positioning fails)
var mchandle = dojo.connect(document, "onmousemove", 'mouseCoords');
//dojo.query(".dojoDndItem").connect("onclick", 'mouseCoords');
//dojo.dnd.Source.onMouseDown('mouseCoords')
</script>
<script type="text/javascript">








var item_price;
var total = 0;
function AddItems(target, nodes) {
for (var i = 0; i < nodes.length; i++)
{ total += parseFloat((target.getItem(nodes[i].id)).data); }
dojo.byId("cost").innerHTML = total;
}


function SubstractItems(target, nodes) {
for (var i = 0; i < nodes.length; i++) {
total -= parseInt((target.getItem(nodes[i].id)).data);
}
dojo.byId("cost").innerHTML = total;
}


function ShowPrice(target, nodes) {
var sum = 0;
for (var i = 0; i < nodes.length; i++) {
dojo.dnd.manager().OFFSET_X = 0 - (mouse.x - dojo._abs(nodes[i]).x);
dojo.dnd.manager().OFFSET_Y = 0 - (mouse.y - dojo._abs(nodes[i]).y);
dojo.dnd.manager().updateAvatar();
sum += parseInt((target.getItem(nodes[i].id)).data);
}

dojo.byId("msg").innerHTML = "Selected Item Price is $" + sum;
}


function ClearMsg()
{ dojo.byId("msg").innerHTML = ""; }


function init() {






dojo.subscribe("/dnd/drop", function(source, nodes, iscopy) {
var t = dojo.dnd.manager().target;
ClearMsg();
if (t == source) { return; }
if (t == cart) { AddItems(t, nodes); }
if (t == shelf) { SubstractItems(t, nodes); }



});


dojo.subscribe("/dnd/start", function(source, nodes, iscopy) {
ShowPrice(source, nodes);
});


dojo.subscribe("/dnd/cancel", function() {
ClearMsg();
});


}




dojo.addOnLoad(init);
















</script>





</head>
<body style="font-size: 12px;">


<table>
<tbody>
<tr valign="top">
<td>
SOURCE
<div dojotype="dojo.dnd.Source" jsid="shelf" class="source" id="source1" accept="red,blue"
singular="false">
<img src="BLUE.png" class="dojoDndItem" dndtype="blue" dnddata="10" title="$10" />
<img src="RED.png" class="dojoDndItem" dndtype="red" dnddata="60" title="$60" />
<img src="BLUE.png" class="dojoDndItem" dndtype="blue" dnddata="13" title="$13" />
<img src="RED.png" class="dojoDndItem" dndtype="red" dnddata="15" title="$15" />
<img src="BLUE.png" class="dojoDndItem" dndtype="blue" dnddata="3" title="$3" />
<img src="RED.png" class="dojoDndItem" dndtype="red" dnddata="148" title="$148" />
<img src="BLUE.png" class="dojoDndItem" dndtype="blue" dnddata="1" title="$1" />
<img src="RED.png" class="dojoDndItem" dndtype="red" dnddata="10" title="$10" />
<img src="BLUE.png" class="dojoDndItem" dndtype="blue" dnddata="3" title="$3" />
</div>
</td>
<td>
TARGET
<div dojotype="dojo.dnd.Source" jsid="cart" class="target" accept="red,blue" id="target1">
</div>
</td>
<td>
Total Price (USD): <span id="cost">0.00</span><br />
<b>Message: <span id="msg" style="color: blue"></span></b>
<td>
</tr>
<tbody />
</table>
</body>
</html>






最佳答案

Dojo 的 DND 在这个意义上是有限的。化身位于偏移位置，因此移动事件不会被表示拖动的节点捕获。在这种情况下，典型的源/目标将不起作用。我创建了一个混合的“插入者/来源”dnd 示例，它可以帮助您完成您想要完成的任务:

http://svn.dojotoolkit.org/src/demos/trunk/beer/src/dnd.js

基本上，我们将“mousedown”连接到某个节点。当它被触发时，我们直接在页面中原始节点所在的位置创建该节点的克隆(请参阅 _dragStart 函数)。然后，我们注册临时的 mousemove 和 mouseup 事件监听器。 mousemove 是一个针对速度进行了优化的紧密函数。只需设置“化身”(克隆)相对于 e.pageX 和 e.pageY(规范化事件对象部分)的顶部/左侧位置。

当触发 mouseup 时，我们断开 mouseup 和 mousemove 事件 (this._listeners)。在示例中，“overTarget”函数仅返回 true。您可以将此逻辑更改为您需要的任何内容，以确保当前 pageX/pageY 坐标在您选择的边界框内(源/目标，无论您喜欢什么)。

在这个例子中，我让它动画回到“源”的原始 x/y，或者把它变成一个 dojo.dnd.Moveable(它是克隆的节点)，从来源。您可能只想使用它来将任何数据添加到您的购物车，并销毁头像。

希望这对您有所帮助。

关于javascript - dojo - mouse(x, y) - 拖放 - 沮丧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1303854/

26 4 0
文章推荐： javascript - Ajax - 我需要在每个 AJAX 请求之前检查是否存在有效 session
文章推荐： c# - ArrayList C# 包含方法查询
文章推荐： c# - 用空字符串替换可变字符串
文章推荐： javascript - 无法访问我的 iframe 中的跨域父元素
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com