个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我正在尝试使用 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
我迷路了。什么目的？把一个字符串变成一个整数？或者将字符转换为 ASCII？如果我为 char s[] 使用任何数字，我会返回该数字。如果我使用任何字母，我都会得到 0。此输出是否正确？如何测试返回类
我知道沮丧可能不是实现我愿望的最佳方式，但它至少表明了我脑海中闪过的解决方案。欢迎任何替代建议。 好吧，不妨深入研究我的代码: public void triggerItem(Item item) {
我有一个 RE 检查器说这应该可以工作。我做错了什么？!？ 我试图忽略的示例: apps/cms/templates/cms/test_bup_DEPRECATED/widgets/page_link
全部， 我一定是做错了。当时这似乎是个好主意，但随着我深入研究，我认为有一种更合适的编程方式来实现它。所以我问你... 一张纸条。我正在使用 Google AppEngine 和数据存储来存储此信息。
与此错误消息的其他示例不同，我已经有一个指向 A 的指针并且想要检索实际的子类。 这种安排是一些 C++ 包装的 C 代码的一部分 A 是一些 POD C 结构(whatswhy 没有动态转换)而 t
我的图标字体有一些 CSS 问题，只是不想与 IE11 合作。昨天我花了几个小时试图掌握它，除了巨大的挫败感之外什么也没做。想过今天多花点时间，但 children 在家度假，我今天已经受够了 LOL
我正在尝试使用 dojo.dnd 拖动一个对象，但希望头像与对象处于相同的位置(相对于鼠标) 即如果有人在对象的中间单击，则鼠标光标将位于头像的中间。 我得到了各种奇怪的结果。如果我将一个函数连接到
所以我整天都在为此工作，我快要失去理智了。我正在尝试从谷歌的位置 api 获取坐标，以便从另一个 api (forcast.io) 获取天气。我的代码已经达到这样的程度，即 google api 正在
我在 Xcode 中出现一个错误，提示“Downcast from '[PFObject]?'” '[PFObject]' 只解包可选值；您是要使用“!”吗？ var iDArray = [S
我想针对以下问题提出一些建议:假设您要为 VCL 控件编写适配器。所有适配器应具有相同的基类，但在包装特殊控件方面有所不同(例如，从 TEdit 获取值与从 TSpinEdit 获取值不同)。所以第一
我是一名优秀的程序员,十分优秀！