I'm using Html5 draggable to drag items into different table cells:

/

<table border="1">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td><span class="event" id="item1" draggable="true">Item 1</span>
        </td>
        <td><span class="event" id="item2" draggable="true">Item 2</span>
            <span class="event" id="item3" draggable="true">Item 3</span>
        </td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

$(document).ready(function(){
    $('.event').on("dragstart", function (event) {
          var dt = event.originalEvent.dataTransfer;
          dt.setData('Text', $(this).attr('id'));
        });
    $('table td').on("dragenter dragover drop", function (event) {  
       event.preventDefault();
       if (event.type === 'drop') {
          var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
          de=$('#'+data).detach();
         de.appendTo($(this));  

       };
   });
})

The only problem with this approach is that if you drag 'Item 1' into the cell where 'Item 2' and 'Item 3' are, Item 1 gets appended to the end.

How can I modify this so that 'Item 1' can be added before 'Item 2' or between 'Item 2' and 'Item 3'. I tried going down the rabbit hole of nested draggables but gave up pretty quickly, hoping there's an easier way!

I'm using Html5 draggable to drag items into different table cells:

http://jsfiddle/d1wnk1bg/6/

<table border="1">
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td><span class="event" id="item1" draggable="true">Item 1</span>
        </td>
        <td><span class="event" id="item2" draggable="true">Item 2</span>
            <span class="event" id="item3" draggable="true">Item 3</span>
        </td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

$(document).ready(function(){
    $('.event').on("dragstart", function (event) {
          var dt = event.originalEvent.dataTransfer;
          dt.setData('Text', $(this).attr('id'));
        });
    $('table td').on("dragenter dragover drop", function (event) {  
       event.preventDefault();
       if (event.type === 'drop') {
          var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
          de=$('#'+data).detach();
         de.appendTo($(this));  

       };
   });
})

The only problem with this approach is that if you drag 'Item 1' into the cell where 'Item 2' and 'Item 3' are, Item 1 gets appended to the end.

How can I modify this so that 'Item 1' can be added before 'Item 2' or between 'Item 2' and 'Item 3'. I tried going down the rabbit hole of nested draggables but gave up pretty quickly, hoping there's an easier way!

• javascript
• html
• jquery

• you could select item 2 or item 3 in de and then use before or after functions – Pawan Commented Jun 4, 2015 at 7:00
• Can you show me how to do that? – Evonet Commented Jun 4, 2015 at 7:53

3 Answers 3

I forked the Fiddle and adjusted the code a bit:

http://jsfiddle/gL88q17m/1/

$(document).ready(function () {
    $('.event').on("dragstart", function (event) {
        var dt = event.originalEvent.dataTransfer;
        dt.setData('Text', $(this).attr('id'));
    });
    $('table td').on("dragenter dragover drop", function (event) {
        event.preventDefault();
        if (event.type === 'drop') {
            var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));

            de = $('#' + data).detach();
            if (event.originalEvent.target.tagName === "SPAN") { 
                de.insertBefore($(event.originalEvent.target));
            }
            else {
                 de.appendTo($(this));
            }
        };
    });
})

What I did is checking whether the item was dropped directly into the td in which case the dropped element will be inserted after all the other entries or if it was dropped on top of another item in which case the item is inserted just before the item the dropped item was dropped on.

Adding some padding to the td makes it easier to drop an item directly into the td even if there are already 3 items inside.

table th, table td {
    width: 200px;
    height:70px;
    padding: 5px;
}
table span {
    display:block;
    background-color: #ccc;
    border: 1px solid black;
    color: fff;
    height: 30px;
    width: 100%;
}

I have done some changes after reading your ment. Now it is working like a charm. I will remend reading this.

 $(document).ready(function () {
    $(".event").on("dragstart",function(event){
        var dt = event.originalEvent.dataTransfer;
        var node = event.target;

        dt.setData('text/html', node.innerHTML);
        dt.setData('text/plain',node.id);
        event.stopPropagation();
    });
    $(".event").on("dragend",function(e){
        event.preventDefault();event.stopPropagation();
    })

    $(".row>td").on("dragenter dragover dragleave",function(e){
                event.preventDefault();event.stopPropagation();
    })
    $(".row > td").on("drop",function(event){
       var dragObjId = event.originalEvent.dataTransfer.getData("text/plain");
        var data = $("#"+dragObjId);
        var dropTarget = $(event.target).closest("td");
        $(dropTarget).prepend(data);
    });
})

$(document).ready(function() {
    $(".event").on("dragstart", function(event) {
        var dt = event.originalEvent.dataTransfer;
        var node = event.target;
        dt.setData('text/html', node.innerHTML);
        dt.setData('text/plain', node.id);
        event.stopPropagation();
    });
    $(".event").on("dragend", function(e) {
        event.preventDefault();
        event.stopPropagation();
    }) $(".row>td").on("dragenter dragover dragleave", function(e) {
        event.preventDefault();
        event.stopPropagation();
    }) $(".row > td").on("drop", functiwww.ta3roof. / on(event) {
        var dragObjId = event.originalEvent.dataTransfer.getData("text/plain");
        var data = $("#" + dragObjId);
        var dropTarget = $(event.target).closest("td");
        $(dropTarget).prepend(data);
    });
})