how to drag sortable divs on to a foreign element

Question

I would like to drag the divs of a sortable container and drop them on to a droppable div (which is not sortable). I have tried using html5 drag and drop events, but none of them are getting fired. Most importantly, dragstart event on sortable container is not getting fired. Can somebody suggest me a solution. I just want the dragstart event to be fired. Here is my complete code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>jQuery UI Sortable - Handle empty divsts</title>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        <style>
            .draggableDivs{
                background-color: orange;
                border: solid black;    
            }
        </style>
    </head>
    <body>
        <div id="sortable" style="float: left;">
            <div class="draggableDivs" draggable="true">Can be dropped !!..</div>
            <div class="draggableDivs" draggable="true">..on an empty list</div>
            <div class="draggableDivs" draggable="true">Item 3</div>
            <div class="draggableDivs" draggable="true">Item 4</div>
            <div class="draggableDivs" draggable="true">Item 5</div>
        </div>
        <div id="dropTarget" style="width: 500px; height: 500px; background-color: skyblue; float: left; text-align: center">
            <h4>Drop Here</h4>
        </div> 
        <script>

            $("#sortable").sortable();

            document.getElementById('sortable').addEventListener('dragstart', function(evt) {
                console.log("The 'dragstart' event fired.");
                evt.dataTransfer.setData('text', evt.target.textContent);
            }, false);

        </script>
    </body>
</html>

Where are you setting that the divs are draggable? `draggable="true"` — StudioTime, Oct 31 '14 at 10:11
You need to add jQuery Code for div#droppable $( "#droppable" ).droppable({accept: "div"}); — Domain, Oct 31 '14 at 10:16
@Darren, I think sortable elements are draggable by default. Please correct me if I am worng. — Quick_Silver, Oct 31 '14 at 10:24
@WisdmLabs: tried $( "#droppable" ).droppable({accept: "div"}); with no luck. — Quick_Silver, Oct 31 '14 at 10:25
Do also refer this SO post http://stackoverflow.com/questions/14308290/jquery-draggable-and-droppable-between-two-containers-and-sortable — Domain, Oct 31 '14 at 10:29
@WisdmLabs: Thank you for your help. I have referred the above post. But when I include Jquery draggable and droppable, functionality of sortable container gets affected badly. So, I want to go with dragstart and drop events. I have edited my question. Please have a look at it. Is there any way to get my dragstart event fired? — Quick_Silver, Oct 31 '14 at 13:34

score 2 · Accepted Answer · edited Nov 03 '14 at 10:17

You can achieve the functionality as follows using jquery ui:

Basically we clone the element being dragged and append it to droppable on drop event, since jQuery ui throws errors at us if we remove the element being dragged.

Then we remove the actual element in the stop event callback.

$("#sortable").sortable();
$("#dropTarget").droppable({
  accept: "div",
  drop: function(event, ui) {
    ui.draggable.clone().appendTo(this);
    ui.draggable.remove();
  }
})

#sortable {
  float: left;
}
.draggableDivs {
  background-color: orange;
  border: solid black;
}
#dropTarget {
  width: 500px;
  height: 500px;
  float: left;
  text-align: center;
  background-color: skyblue;
}

<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="sortable">
  <div class="draggableDivs">Can be dropped !!..</div>
  <div class="draggableDivs">..on an empty list</div>
  <div class="draggableDivs">Item 3</div>
  <div class="draggableDivs">Item 4</div>
  <div class="draggableDivs">Item 5</div>
</div>
<div id="dropTarget">
  <h4>Drop Here</h4>

</div>

Side notes:

Don't mix native drag and drop with jquery ui.
Don't mix inline styles and internal/external styles. Avoid using inline styles at all if possible. Why Use CSS?

Thank you very much for the detailed solution and the suggestions. But when I use jquery droppable, dropped elements are not positioned w.r.t drop target internally. That is, the dropped elements are positioned with respect to screen. Would you please let me know how could I position them as internal elements of the drop target? I mean the dropped elements should be positioned one below another, instead of placing them where ever I drop them on the screen. — Quick_Silver, Nov 03 '14 at 06:07
@Quick_Silver For that you can simply remove the styles injected by jquery ui from the cloned element... see this [jsfiddle](http://jsfiddle.net/221catyL/). You can style the appearance of items inside the drop area as you wish using css — T J, Nov 03 '14 at 09:13
Thank you very much. Your solution is really clear and simple. I am accepting your answer. — Quick_Silver, Nov 03 '14 at 09:16

how to drag sortable divs on to a foreign element

1 Answers1