Paulo Scardine escreveu:
Hi,
I'm making an operator control panel for a soft-pbx system.
I made a class (extending view) representing external telephone lines
and internal extensions.
The operator should be able to transfer a call just dragging one
line/extension over another. I also made a custom layout that handles
switched calls, and its working great.
What I could not accomplish is this: I would like to "highlight" the
target extension while dragging the source extension over it. They are
both siblings of the same class (replicated according to a dataset).
I was reading about LzTrack and basetrackgroup, but I was unable to
use onmousetrackX events while dragging (funny how we get lots of
over/out events).
What am I doing wrong?
I was able to achieve the above, after finding some anonymous sample
code at google.
1) instantiated a hidden object with options="ignorelayout"
2) on mousedown, I show and drag the hidden object arround.
Now I'm able to track onmousetrackX events.
Thank you, anonymous author.
--
Paulo
<canvas>
<script><![CDATA[
function DragUtil() {
}
DragUtil.start = function(sender, label) {
DragUtil.__x = canvas.getMouse("x");
DragUtil.__y = canvas.getMouse("y");
DragUtil.__sender = sender;
DragItem.start(sender, label);
}
DragUtil.register = function(sender) {
LzTrack.register(sender, "draganddrop");
}
DragUtil.getSender = function() {
var o = DragUtil.__sender
var x1 = o.getAttributeRelative("x", canvas)
var x2 = x1 + o.width
var y1 = o.getAttributeRelative("y", canvas)
var y2 = y1 + o.height
var mx = canvas.getMouse("x");
var my = canvas.getMouse("y");
if (mx < x1 || mx > x2 || my < y1 || my > y2)
return DragUtil.__sender
return null
}
]]></script>
<view name="DragItem" height="20" visible="false" opacity="0.8"
options="ignorelayout">
<text name="label" bgcolor="white" fontsize="14" />
<dragstate name="dragger"/>
<!-- methods -->
<method name="start" args="sender, label">
this.bringToFront();
this.setX(sender.getAttributeRelative("x", canvas));
this.setY(sender.getAttributeRelative("y", canvas));
this.setWidth(sender.width);
this.setVisible(true);
// make this drag item look like the original item
// NOTE: you can depends on the sender class to render different look
this.setAttribute("bgcolor", sender.getAttribute("bgcolor"))
this.label.setText(" " + label);
this.dele1 = new LzDelegate(this, "doMouseUp", sender, "onmouseup");
this.dragger.apply();
LzTrack.activate("draganddrop");
</method>
<method name="doMouseUp">
this.dele1.unregisterAll();
this.dragger.remove();
this.setVisible(false);
LzTrack.deactivate("draganddrop");
DragUtil.__sender = null;
</method>
</view>
<class name="test" width="200" height="20" bgcolor="white">
<attribute name="text" type="string" value=""/>
<attribute name="originaltext" type="string" value="$once{this.text}"/>
<dragstate name="dragger" drag_axis="both"/>
<simplelayout axis="x"/>
<view name="inner" x="2" y="2" width="194" height="16" bgcolor="white">
<text fontsize="14" text="${parent.parent.text}"/>
</view>
<method event="oninit">
DragUtil.register(this);
</method>
<method event="onmousedown">
DragUtil.start(this, this.originaltext);
</method>
<method event="onmousetrackup"><![CDATA[
var sender = DragUtil.getSender();
if (sender && sender != this) {
this.setAttribute('text', sender.originaltext + '->' +
this.originaltext);
sender.setAttribute('text', sender.originaltext);
this.setBGColor(blue);
}
]]>
</method>
<method event="onmousetrackover"><![CDATA[
this.setBGColor(red);
]]>
</method>
<method event="onmousetrackout"><![CDATA[
this.setBGColor(white);
]]>
</method>
</class>
<view>
<view>
<simplelayout axis="y" spacing="5"/>
<test text="a"/>
<test text="b"/>
<test text="c"/>
<test text="d"/>
<test text="e"/>
<test text="f"/>
</view>
</view>
</canvas>
