4

So I'm about to hang up the gloves and give up, but before that I'm going to try StackOverflow. :)

What I'm trying to achieve:

I'm building an app where one of its functionalities is to create new DOM elements (mostly styled divs) and inject those elements in the current document. The injection is done via a 'drag and drop' functionality: user creates the div, drags it to the place where he wants it (other elements in the area 'get out of the way'), and releases it, thus fixing the div in the place where it was dropped. To give an example, it would be something like this: http://vimeo.com/54413541#t=0m42s

The problem:

With JQuery UI, I have been able to add all the drag and drop functionality. However, I cannot achieve the part of "other elements in the area 'get out of the way'". Now, this would be fairly easy if I could control the current/parent document. In such a case, I would simply use JQuery UI's sortable behavior. But the current/parent document is also created by the user (copy+pasting HTML, scrapping remote HTML, etc.). So, there is no way I can add JQuery's UI sortable behavior to HTML that can vary each time. So, in short, I want to take a newly-created element, drag it over arbitrary HTML, push other elements in the vicinity out of the way (mostly in vertical axis), and finally inject the newly-created element in the area when the user releases the mouse. Again: http://vimeo.com/54413541#t=0m42s

What I have tried:

I have tried all sorts of combination with JQuery's UI draggable, droppable, and sortable behaviors. The main obstacle here is that the HTML is arbitrary, so I cannot think "make this list of divs sortable", since I dont know if there will be a list of divs.

I also tried creating a placeholder div above the current hovered element, so that this placeholder 'makes space' for the dragged div. But this resulted in crappy behavior and very bad results.

Solutions in JQuery, JQueryUI, or a similar nifty library are preferred.

Community
  • 1
  • 1
YOMorales
  • 1,926
  • 1
  • 15
  • 25
  • "The main obstacle here is that the HTML is arbitrary, so I cannot think "make this list of divs sortable", since I dont know if there will be a list of divs." Have tried when _know_ what "list of divs" will be ? Is effect possible then ? Does the `draggable` `div` have unique `id` ? – guest271314 Apr 05 '14 at 18:33
  • 1
    Have you tried angular js? The two-way binding makes any kind of dom manipulation easy. – Andriy Drozdyuk Apr 09 '14 at 15:11

2 Answers2

2

Creating placeholder elements in target HTML is IMHO your only viable option. You need to somehow identify sortable elements and insertBefore the placeholder.

Crappiness of the result will only depend on

  1. How well you'll be able to identify where to place the placeholders - which elements in target HTML should be 'sortable'.
    • Do you have some clues on target HTML structure - which elements can you prepend your div in front of? (e.g. some nice HTML5 with <section>s)
    • If not, try some some educated guess (e.g. pick all <div>s with siblings) and see if it works in your typical target HTML
  2. Visual representation
    • Try showing placeholders on drag start to see where the dragged element could go to. At this point, style these placeholders so they are visible but do not eat up space (e.g. border:1px; margin:-1px)
    • expand the placeholder to full height when hovering the mouse over element being prepended. Some quick animation of the height change could help.
tom
  • 106
  • 1
  • 4
  • My bad. I didnt notice that the bounty expired, and as far as I know Stackoverflow assigned a little of its points to you. Anyway, accepting this answer as it is the most extensive. – YOMorales Apr 11 '14 at 22:43
1

To turn the arbitrary HTML into sortable elements, can you use the $.children() API to modify just the area's first-level children (not ancestors) to move out of the way of the new content?

It would be useful to have a few examples of the HTML in question (two different examples of how arbitrary it can be), to get an idea of the constraints you face.

tephyr
  • 1,001
  • 2
  • 14
  • 26
  • It can be as arbitrary as the Internet can be. For example, anyone can enter any website URL to scrape the HTML. Although it is mostly intended for blogs and articles. So yeah, if you have a Wordpress blog, you could enter the URL. Or I could enter the URL to a news site. Or a personal site. Or whatever. – YOMorales Apr 09 '14 at 03:19