Drag a new DOM element and push the others before entering

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

What I'm trying to achieve:

I am creating an application where one of its functions is to create new DOM elements (mostly stylized divs) and introduce these elements into the current document. Injection is performed using the “drag and drop” function: the user creates a div, drags it to where he wants it (other elements in the “get out of the way” area), and releases it, thereby fixing the div in the place where it was reset. To give an example, it would be something like this: http://vimeo.com/54413541#t=0m42s

Problem:

With jQuery UI, I was able to add all the drag and drop features. However, I can’t reach some of the “other elements in this area” to get out of the way. "Now it would be pretty easy if I could control the current / parent document. In that case, I would just use the JQuery UI to sort. the current / parent document is also created by the user (copying + pasting HTML, deleting deleted HTML, etc.). Thus, I cannot add jQuery UI-sortable behavior in HTML that can change every time. So, in short, I I want to take the newly created element, drag it to my will the first HTML-code, send the other elements in the direction of (mainly on the vertical axis), and finally insert the newly created element in the area when the user releases the mouse. Again:http://vimeo.com/54413541#t=0m42s

, :

JQuery UI draggable, droppable sortable behaviors. , HTML , " divs sortable", , div.

div , placeholder " " div. .

JQuery, JQueryUI .

+4
2

- HTML . - insertBefore .

Crappiness

  • - HTML "".
    • HTML - div ? (, HTML5 <section> s)
    • , - (, <div> ) , HTML
    • , , . , , (, border:1px; margin:-1px)
    • . .
+2

HTML , API $.children() ( ), ?

HTML ( , ), , .

+1

Source: https://habr.com/ru/post/1533815/


All Articles