CODEWITHSUNDEEP
javascriptjquerysvgraphaeldom-events
Abdelali AHBIB
Abdelali AHBIB

Reputation: 602

raphael js : text elements drag & drop in the wrong direction

  1. I have a lot of text elements that I draw by raphael js and I added drag & drop possibility to them (the entire raphael paper), most of them are dragged perfectly but there is some text elements that moves in a wrong direction I don't know why?

    In this jsfiddle I draw just 3 example of text elements, what I noticed that the text elements that moves in the wrong direction have "-1" in the matrix like this "0 0.9407 -1 0 473.4541 293.4927", these values of matrix are gived by Illustrator (export ai to svg)

    http://jsfiddle.net/xperali/g6Xav/

  2. I want also that the text elements can't be selected, I tried to use event.preventDefault(); to cancel the mouse events like 'onmouseover' and 'onmouseout' and 'onclick' without any success

    I googled for this problem and I didn't found anything, Any suggestions?

Solution:
Finally, I used raphael-pan-zoom plugin that enables pan and zoom functionalities and it works fine!

Upvotes: 1

Views: 671

Answers (2)

Abdelali AHBIB
Abdelali AHBIB

Reputation: 602

finaly, I used raphael-pan-zoom plugin that enables pan and zoom functionnalities and it works fine! Thank's JonVD for the answer, but I have a lot of text elements with this issue and I can't every time change the m values randomly.

Thank you a lot for the effort, anyway, you solved the second problem

Upvotes: 0

JonVD
JonVD

Reputation: 4268

The raphael issue seems a lot more challenging than your second issue which is the one I'll take a crack at. You can make these non-selectable with a little css and an attribute (for IE10 and Opera).

text { /* Use a more applicable selector here - text is potentially too generic */
   -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    user-select: none;
    /*cursor:pointer;*/
}

Fiddle

This is solves most of the problem, but with Opera and IE10 you need to be able to set other attributes on the elements, namely unselectable="on". You can set this through javascript if you can't find a way to do it in the declaration for the element.

I did get the directional stuff working by playing with the m: value of the odd one out, changing it to m:'0.9407 0 0 1 473.4541 293.4927' from m:'0 0.9407 -1 0 473.4541 293.4927'.

However, I realise you had that label vertical for a reason, which is the part that I can't get working. As soon as you make that label vertical, it flips the directional axis of the drag. This because you're effectively spinning the shape itself and it seems to retain it's own sense of direction when being dragged.

If you're interested, here is a fiddle where I've spun the label back around to it's normal orientation and it works just like the others.

Upvotes: 1

Related Questions