You are viewing a plain text version of this content. The canonical link for it is here.
Posted to batik-users@xmlgraphics.apache.org by fireball <sa...@hotmail.com> on 2012/08/04 17:48:58 UTC
Issue with dragging shapes
I have two issues actually, one major and one minor.
Major: I can't drag shapes over others. I have to drag them around for it to
work. Note that when I go back to the shape, the handle is still there and
the shape will continue moving without re-clicking.
Does it have to do with the way I add shapes to the DOM document or the way
I handle the dragging, or is it both, or is it something else?
Minor: Moving mouse too fast after a mousedown loses the shape (shape stops
moving) but when I go back to it the handle is still there and the shape
keeps moving with the mouse without re-clicking on it. Same behaviour as in
the major case above. What would be the cause?
I register a handler object which listens to mousedown, mousemove, and
mouseup for any object that is draggable. I do keep track of initial points
to re-adjust the position. Something similar to
http://wiki.apache.org/xmlgraphics-batik/DragTutorial
Please let me know if you need to see any code for more info.
Thanks,
fireball.
--
View this message in context: http://batik.2283329.n4.nabble.com/Issue-with-dragging-shapes-tp4655175.html
Sent from the Batik - Users mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
Re: Issue with dragging shapes
Posted by Thomas DeWeese <th...@gmail.com>.
Hi fireball,
Jonathan has the right of it. You need a glass pane to make dragging
work at all.
You might be interested in looking at the samples/solitaire directory which
does card dragging along these lines.
On Sat, Aug 4, 2012 at 3:30 PM, jonathan wood <jo...@gmail.com>wrote:
> I've found it best to handle mousedown on the element being dragged, then
> track all mm/mu on a glasspane above the elements to be dragged.
>
> here's a very simple example in svg:
>
> <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
> <svg version="1.1" width="100%" height="100%" xmlns="
> http://www.w3.org/2000/svg" onload="init()" pointer-events="all">
> <script type="text/ecmascript">
> <![CDATA[
> var drag = false;
> var svg;
> var draggable;
>
> function init(e) {
> svg = document.documentElement;
> var rect = document.getElementById("draggable");
> rect.addEventListener("mousedown", md, false);
> svg.addEventListener("mousemove", mm, false);
> svg.addEventListener("mouseup", mu, false);
> }
>
> function md(e) {
> drag = true;
> draggable = e.currentTarget;
> }
>
> function mu(e) {
> drag = false;
> }
>
> function mm(e) {
> if (drag) {
> var p = getPoint(e);
> var m = svg.createSVGMatrix().translate(p.x, p.y);
> var transform = "matrix(" + m.a + " " + m.b + " " + m.c +
> " " + m.d + " " + m.e + " " + m.f + ")";
> draggable.setAttributeNS(null, "transform", transform);
> }
> }
>
> function getPoint(e) {
> var p = svg.createSVGPoint();
> p.x = e.clientX;
> p.y = e.clientY;
> p = p.matrixTransform(svg.getScreenCTM().inverse());
> return p;
> }
> ]]>
> </script>
> <rect id="background" x="0" y="0" width="100%" height="100%"
> fill="#BBB" stroke="#000" />
> <rect id="draggable" x="0" y="0" height="100" width="100"
> fill="cornflowerblue"/>
> </svg>
>
>
> On Sat, Aug 4, 2012 at 11:48 AM, fireball <sa...@hotmail.com> wrote:
>
>> I have two issues actually, one major and one minor.
>>
>> Major: I can't drag shapes over others. I have to drag them around for it
>> to
>> work. Note that when I go back to the shape, the handle is still there and
>> the shape will continue moving without re-clicking.
>> Does it have to do with the way I add shapes to the DOM document or the
>> way
>> I handle the dragging, or is it both, or is it something else?
>>
>> Minor: Moving mouse too fast after a mousedown loses the shape (shape
>> stops
>> moving) but when I go back to it the handle is still there and the shape
>> keeps moving with the mouse without re-clicking on it. Same behaviour as
>> in
>> the major case above. What would be the cause?
>>
>> I register a handler object which listens to mousedown, mousemove, and
>> mouseup for any object that is draggable. I do keep track of initial
>> points
>> to re-adjust the position. Something similar to
>> http://wiki.apache.org/xmlgraphics-batik/DragTutorial
>>
>> Please let me know if you need to see any code for more info.
>>
>> Thanks,
>>
>> fireball.
>>
>>
>>
>> --
>> View this message in context:
>> http://batik.2283329.n4.nabble.com/Issue-with-dragging-shapes-tp4655175.html
>> Sent from the Batik - Users mailing list archive at Nabble.com.
>>
>> ---------------------------------------------------------------------
>> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
>> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
>>
>>
>
Re: Issue with dragging shapes
Posted by fireball <sa...@hotmail.com>.
Thanks guys for the help.
The only issue I had is that I registered md, mm, and mu on the "rect"
instead of on "rect" and "root element", as in Jonathan's example. Thanks
Jonathan.
Now shapes are dragged flowlessly.
Thanks!
fireball.
--
View this message in context: http://batik.2283329.n4.nabble.com/Issue-with-dragging-shapes-tp4655175p4655184.html
Sent from the Batik - Users mailing list archive at Nabble.com.
---------------------------------------------------------------------
To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
Re: Issue with dragging shapes
Posted by jonathan wood <jo...@gmail.com>.
I've found it best to handle mousedown on the element being dragged, then
track all mm/mu on a glasspane above the elements to be dragged.
here's a very simple example in svg:
<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg version="1.1" width="100%" height="100%" xmlns="
http://www.w3.org/2000/svg" onload="init()" pointer-events="all">
<script type="text/ecmascript">
<![CDATA[
var drag = false;
var svg;
var draggable;
function init(e) {
svg = document.documentElement;
var rect = document.getElementById("draggable");
rect.addEventListener("mousedown", md, false);
svg.addEventListener("mousemove", mm, false);
svg.addEventListener("mouseup", mu, false);
}
function md(e) {
drag = true;
draggable = e.currentTarget;
}
function mu(e) {
drag = false;
}
function mm(e) {
if (drag) {
var p = getPoint(e);
var m = svg.createSVGMatrix().translate(p.x, p.y);
var transform = "matrix(" + m.a + " " + m.b + " " + m.c + "
" + m.d + " " + m.e + " " + m.f + ")";
draggable.setAttributeNS(null, "transform", transform);
}
}
function getPoint(e) {
var p = svg.createSVGPoint();
p.x = e.clientX;
p.y = e.clientY;
p = p.matrixTransform(svg.getScreenCTM().inverse());
return p;
}
]]>
</script>
<rect id="background" x="0" y="0" width="100%" height="100%"
fill="#BBB" stroke="#000" />
<rect id="draggable" x="0" y="0" height="100" width="100"
fill="cornflowerblue"/>
</svg>
On Sat, Aug 4, 2012 at 11:48 AM, fireball <sa...@hotmail.com> wrote:
> I have two issues actually, one major and one minor.
>
> Major: I can't drag shapes over others. I have to drag them around for it
> to
> work. Note that when I go back to the shape, the handle is still there and
> the shape will continue moving without re-clicking.
> Does it have to do with the way I add shapes to the DOM document or the way
> I handle the dragging, or is it both, or is it something else?
>
> Minor: Moving mouse too fast after a mousedown loses the shape (shape stops
> moving) but when I go back to it the handle is still there and the shape
> keeps moving with the mouse without re-clicking on it. Same behaviour as in
> the major case above. What would be the cause?
>
> I register a handler object which listens to mousedown, mousemove, and
> mouseup for any object that is draggable. I do keep track of initial points
> to re-adjust the position. Something similar to
> http://wiki.apache.org/xmlgraphics-batik/DragTutorial
>
> Please let me know if you need to see any code for more info.
>
> Thanks,
>
> fireball.
>
>
>
> --
> View this message in context:
> http://batik.2283329.n4.nabble.com/Issue-with-dragging-shapes-tp4655175.html
> Sent from the Batik - Users mailing list archive at Nabble.com.
>
> ---------------------------------------------------------------------
> To unsubscribe, e-mail: batik-users-unsubscribe@xmlgraphics.apache.org
> For additional commands, e-mail: batik-users-help@xmlgraphics.apache.org
>
>