dojo - мышь (x, y) - перетаскивание - разочарование - PullRequest
Новая
       12

dojo - мышь (x, y) - перетаскивание - разочарование

1 голос
/ 20 августа 2009

Я пытаюсь перетащить объект, используя 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>






Ответы [ 2 ]

2 голосов
/ 21 августа 2009

Додзё не беспокоит в этом смысле. Аватар расположен со смещением, поэтому события перемещения не фиксируются узлом, представляющим перетаскивание. Типичный источник / цели не будут работать в этом случае. Я создал гибридный пример «движитель / источник» и может помочь вам вместе с тем, чего вы пытаетесь достичь:

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 (это клонированный узел), создавая своего рода разметку из источник. Вы, вероятно, захотите просто использовать это, чтобы добавить любые данные в корзину и уничтожить аватар.

Надеюсь, это поможет.

0 голосов
/ 25 августа 2009

В настоящее время ... (так как я не знал, как реализовать гибрид JS)

Я использовал событие отмены и сравнил координаты мыши с каждым исходным объектом на странице, чтобы определить, в какой объект он должен быть добавлен.

JS на странице сейчас: 

var mchandle;
dojo.require("dojo.dnd.Source");
var lastSrc;
function init() {
    dojo.subscribe("/dnd/drop", function(source, nodes, iscopy) {
        dojo.byId("msg").innerHTML += " drop";
        dojo.disconnect(mchandle);
    });
    dojo.subscribe("/dnd/start", function(source, nodes, iscopy) {
        lastSrc = source;
        mchandle = dojo.connect(dojo.doc, "onmousemove", "mouseCoords");
        dojo.byId("msg").innerHTML = "start";
        var px = 0;
        var py = 0;
        for (var i = 0; i < nodes.length; i++) {
            var nPos = dojo._abs(nodes[i]);
            px = nPos.x > px ? nPos.x : px;
            py = nPos.y > py ? nPos.y : py;
        }
        dojo.dnd.manager().OFFSET_X = 0 - (source._lastX - px);
        dojo.dnd.manager().OFFSET_Y = 0 - (source._lastY - py);


    });
    dojo.subscribe("/dnd/cancel", function() {
        dojo.byId("msg").innerHTML += " cancel";
        dojo.query("[dojotype=\"dojo.dnd.Source\"]").forEach(function(node, index, array) {
            var elemXY = dojo.coords(node);
            if ( //in source box
            (elemXY.x <= document.mouse.x && document.mouse.x <= (elemXY.x + elemXY.w)) && (elemXY.y <= document.mouse.y && document.mouse.y <= (elemXY.y + elemXY.h))) {
                var s = new dojo.dnd.Source(node, null);
                s.insertNodes(true, lastSrc.getSelectedNodes(), null, null);
            }
        });
        dojo.disconnect(mchandle);
        lastSrc = null;
    });
}
dojo.addOnLoad(init);
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;
    }
    document.mouse = {
        "x": px,
        "y": py
    };
}

Ошибка все еще происходит. Тащу к цели (все хорошо.) я перетаскиваю из цели, и дублирующий аватар застревает на экране. firebug сообщает об ошибке. 

_5.getItem(_6[i].id) is undefined
} catch (e) {\r\n                                 dojo.js (line 203)

Не могли бы вы предложить какую-нибудь помощь?

...