Xopus and jQuery draggables

  • 6 replies.
  • This is not yet resolved.
  • This question was started by gewfy.
  • Last post by fredrik.westmark.
gewfy
member
December 7th 2009
I'm trying to make HTML elements as draggables after a new node/child is inserted.
But XopusAfterChildInserted seems to be too early since jQuery can't find the new HTML elements.

Xopus 3 had this "afterRedraw" event, but it seemes to be triggered too often.

How, where and when would you register events on the generated HTML, like i.e jQuery draggable: $(HTMLNode).draggable();?

Thanks in advance!
Sjoerd Visscher
Xopus Team
December 8th 2009
What you can do is:
1. Listen to both XopusAfterChildInserted and afterRedraw
2. On XopusAfterChildInserted, add the xml child to a temporary list
3. On afterRedraw, set draggable on the html elements for each xml child in the list. (And clear the list)

You can get html elements from xml elements with the Editor. getHTMLElementsForXMLNode function.

greetings,
Sjoerd
gewfy
member
December 8th 2009
Excellent solution, thanks!
fredrik.westmark
user
March 11th 2010
Has anyone managed to make this work? I have followed the example above and can via Firebug confirm that the inserted HTML element gets the jQuery class "ui-draggable" and should thus be draggable. But when I try to drag it, nothing happens.

After trying to make this work for some time I opted to implement my own dragging implementation, but that does not work either. It seems that the mousemove event is not fired when a mousebutton is held down. Does Xopus interfere with these events in any way?

BR // Fredrik
Sjoerd Visscher
Xopus Team
March 11th 2010
Yes, within the xml island Xopus has to interfere with the events to make the cursor work. gewfy was working with Xopus 3, where we did not have our own cursor implementation, and needed to interfere less with the events.

The only solution I can think of is to find a way to have the draggable items outside of the xml island. This means that you have to clone the parts of the xsl output that have to be draggable, and insert them in the html document outside of the xml island. Note that you should *clone* the content and not *move* it, otherwise Xopus can't find the content when it has to render updates. You can hide the originals of the clones with css.
fredrik.westmark
user
March 11th 2010
Thanks for the quick reply. I will post back the successful solution if we have it.
fredrik.westmark
user
March 11th 2010
We now have a working solution where we place the xopus island in an iframe and display an absolutely positioned div on top of the iframe when the user clicks an element. This is also the only DOM element that we need to make draggable. With jQuery we can find out the element's absolute position(by adding the height of the toolbar) which we use to position our own div. When the user is finished we update the xmlnode's attributes(top/left) directly.

React

HTML will be shown as HTML code.
Linebreaks and Links starting with http:// are automatically resolved