CODEWITHSUNDEEP
javascripthtmlposition
calebmiranda
calebmiranda

Reputation: 166

Drag div to another part of the text

I have a html file with the following code:

<style>
    .important {
        border: solid;
        ...
    }
</style>

<body>

    Lorem ipsum 1<br/>
    <div class="important">
        Lorem Ipsum 2
    </div>
    Lorem ipsum 3<br/>
    Lorem ipsum 4

</body>

User needs to be able to reposition the <div> with class="important" if he prefers it under or above where it is.

So, we have:

Lorem Ipsum 1
Lorem Ipsum 2 // with class="important"
Lorem Ipsum 3
Lorem Ipsum 4

and user must be able to "drag" (not necessarily drag, although it would be the best) the Lorem Ipsum 2 up and down, so it would be:

Lorem Ipsum 1
Lorem Ipsum 3
Lorem Ipsum 2 // with class="important"
Lorem Ipsum 4

or

Lorem Ipsum 2 // with class="important"
Lorem Ipsum 1
Lorem Ipsum 3
Lorem Ipsum 4

It may be more than one line at a time (usually is). The idea is that Lorem Ipsum 2 is a "THIS IS IMPORTANT" box. User is editing content for other users.

I'm not sure if this is relevant, but in the database this "important" parts are tagged this way

Lorem Ipsum 1
[[!]]Lorem Ipsum 2[[/!]]
Lorem Ipsum 3
Lorem Ipsum 4

So, there are some questions:

1) is it possible to that with drag and drop?

2) how will the "new position" be passed to my script? It cannot be X and Y, because I need it in relation to the text (as the database text will be modified)

3) is there a better way to do this?

thanks in advance

Upvotes: 1

Views: 46

Answers (1)

MrFrag
MrFrag

Reputation: 179

I think jQueryUI's draggable is what you need:

https://jqueryui.com/draggable/#sortable

Upvotes: 1

Related Questions