HTML5 sorting DIV

Question

I have a little problem with HTML5 drag&drop API. Let's write the code so everyone can understand.

<div id="draggerContainer" droppable="true">
  <div class="draggableItem" draggable="true" data-id="001">[... Stuff inside like <img> and other <div> ...] </div>
  <div class="draggableItem" draggable="true" data-id="002">[... Stuff inside like <img> and other <div> ...] </div>
  <div class="draggableItem" draggable="true" data-id="003">[... Stuff inside like <img> and other <div> ...] </div>
  <div class="draggableItem" draggable="true" data-id="004">[... Stuff inside like <img> and other <div> ...] </div>
  <div class="draggableItem" draggable="true" data-id="005">[... Stuff inside like <img> and other <div> ...] </div>
  <div class="draggableItem" draggable="true" data-id="006">[... Stuff inside like <img> and other <div> ...] </div>
</div>

Well that's is awkard but I don't know how to use the drag&drop api. I've already tried the tutorial on html5rocks.com but nothing.. Can someone tell me how to start and create a sorting system in html5 and Js (better jQuery if is possible) ?

That's the source code from the tutorial.

function handleDragStart(e) {
  // Target (this) element is the source node.
  this.style.opacity = '0.4';
  dragSrcEl = this;
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
}
function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // Necessary. Allows us to drop.
  }
  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.
  return false;
}
function handleDragEnter(e) {
  // this / e.target is the current hover target.
  this.classList.add('over');
}
function handleDragLeave(e) {
  this.classList.remove('over');  // this / e.target is previous target element.
}
function handleDrop(e) {
  // this / e.target is current target element.
  if (e.stopPropagation) {
    e.stopPropagation(); // stops the browser from redirecting.
  }
  // See the section on the DataTransfer object.
  return false;
}
function handleDragEnd(e) {
  // this/e.target is the source node.
  [].forEach.call(cols, function (col) {
    col.classList.remove('over');
  });
}
var cols = document.querySelectorAll('#draggerContainer .draggableItem');
[].forEach.call(cols, function(col) {
  col.addEventListener('dragstart', handleDragStart, false);
  col.addEventListener('dragenter', handleDragEnter, false)
  col.addEventListener('dragover', handleDragOver, false);
  col.addEventListener('dragleave', handleDragLeave, false);
  col.addEventListener('drop', handleDrop, false);
  col.addEventListener('dragend', handleDragEnd, false);
});

I've used Javascript scripts used in tutorial on HTML5Rocks.

Where is your JS / JQuery source? You can't just post static HTML and ask why the JS is broken. Any console output, etc? — Josh
– Josh, Commented Nov 8, 2012 at 18:04
If you are asking for a tutorial that you can't execute without success I think this is not the right place. You have to put code that makes your life a nightmare or something. So, if you did that tutorial, what you think is wrong? where are you getting an error? These could be reasonable questions (also, providing some code) — Oscar Jara
– Oscar Jara, Commented Nov 8, 2012 at 18:08
I don't want a tutorial.. I've already use it (HTML5ROCKS). I wonder if someone can just help me. — Ludo237
– Ludo237, Commented Nov 8, 2012 at 18:09

pimvdb · Accepted Answer · 2012-11-08 18:13:43Z

6

http://jsfiddle.net/WxTqd/

First, when a drag starts, send the data-id attribute as drag information, so that you know which element is being dragged:

$("#draggerContainer")
    .on("dragstart", ".draggableItem", function(e) {
        e.dataTransfer.setData("id", $(this).data("id"));
    })

You have to preventDefault() on dragover to get drag working:

.on("dragover", ".draggableItem", function(e) {
    e.preventDefault();
})

And on drop, you have to swap elements:

.on("drop", ".draggableItem", function(e) {
    // get the element being dragged according to drag information
    var id = e.dataTransfer.getData("id");

    var $draggingElem = $(".draggableItem").filter(function() {
        return $(this).data("id") === id;
    });


    // This is to make sure the element appears under the cursor
    var indexDrag = $draggingElem.index();
    var indexThis = $(this).index();

    if(indexDrag < indexThis) {
        $draggingElem.insertAfter(this);
    } else if(indexDrag > indexThis) {
        $draggingElem.insertBefore(this);
    }
});

This uses e.dataTransfer, which jQuery doesn't expose by default. To enable this, execute this once per page load:

$.event.props.push("dataTransfer");

answered Nov 8, 2012 at 18:13

pimvdb

155k80 gold badges313 silver badges358 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ludo237 Over a year ago

Thanks, I'm going to try it ASAP

Michael Cordingley Over a year ago

Just want to add that you can also get to dataTransfer on a jQuery event object like this: e.originalEvent.dataTransfer It's a bit less direct, but it doesn't require the event props push.

pizza247 · Accepted Answer · 2012-11-08 18:06:36Z

0

Check out jquery ui sortable

It's a pretty simple library

answered Nov 8, 2012 at 18:06

pizza247

3,9077 gold badges35 silver badges47 bronze badges

1 Comment

Errol Dsilva Over a year ago

JQuery UI Sortable works for simple UL's. But when you need to drag drop div's or other elements it doesn't work as expected.

Collectives™ on Stack Overflow

HTML5 sorting DIV

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related