CODEWITHSUNDEEP
jquerydrag-and-drop
Scott B
Scott B

Reputation: 40157

Enable drag and drop via jQuery

I have a list of li elements that I need to allow drag/drop into the WordPress content editor which is a tinyMCE enabled textarea with id="content"

Can someone give me an outline of the jQuery code involved?

Here's the list and individual items I want to enable to be drag/droppable into the content editor. I only want the innerText of each li element to be copied over.

<ul class="keywords">
    <li class="dragDrop" id="seo-kw-1">keyword one</li>
    <li class="dragDrop" id="seo-kw-2">keyword two</li>
    <li class="dragDrop" id="seo-kw-3">keyword three</li>
</ul>

And here's the drop target for each keyword item.

<div id='editorcontainer'>
    <textarea rows='10' class='theEditor' cols='40' name='content' id='content'>drop content here</textarea>
</div>

Upvotes: 1

Views: 1043

Answers (2)

Saad Imran.
Saad Imran.

Reputation: 4530

Use jQUery UI.

http://jqueryui.com/demos/draggable/

http://jqueryui.com/demos/droppable/

Upvotes: 0

rolling stone
rolling stone

Reputation: 13016

Have you checked out jQuery UI droppable: http://jqueryui.com/demos/droppable/

Upvotes: 1

Related Questions