CODEWITHSUNDEEP
phpjavascripthtmldrag-and-dropdraggable
dannyn382
dannyn382

Reputation: 363

HTML 5 and Javascript Drag and Drop

I am having an issue with http://jsfiddle.net/Hh8qJ/ I know of two major problems. One does not work in Safari(and probably Internet Exploder). It seems as if options in Safari may not be able to be made into a dragable object? Also in Firefox, the options do not deselect when dropped. This is part of a bigger project, so I will describe somewhat what I am trying to accomplish and why I ventured down the path that I did. So I chose the drop down so that elements could be inserted to and from it, and if needed items could be put in different places in the drop down. In the larger project, there will only be one of these drop downs, and many of the drop-zone divs. The items will be dragged from the drop down into many of these drop fields, but in certain cases may need to go backwards. I am not really sure if there is a better way to do this, but this is what I came up with. I would like to avoid JQuery.

Thank you for your help!

EDIT: The HTML was there because I had to put in some code and figured that no one wanted the full file here.

I will try to give a more concise example of how this could be actually used. Say I have 4 boxes, with car names. The boxes say saab, volvo, ford, and dodge. The task would be to drag from the drop down all of the cars into there respectable drop zone. Then if the user wanted to put the cars back in the drop down, they could drag them back into the drop down from the drop zone and it would then place them back into alphabetical order. (I do know there is not code now to do the alpabetizing, but I was trying one hurdle at a time.) Keep in mind, this is a very small scale example of how I have plans to use this for a much larger project, this is just an attempt that I am making to make the issue I am having as simple as possible. 

  <html>

Upvotes: 1

Views: 892

Answers (1)

jaycroll
jaycroll

Reputation: 67

Here's my solution:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1, #div2
{float:left; width:100px; height:150px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
 ev.preventDefault();
}

function drag(ev)
{
 ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
 ev.preventDefault();

 var data=ev.dataTransfer.getData("Text");
 ev.target.appendChild(document.getElementById(data));
}
function sort(uList)
{
  var listItem = document.getElementById(uList).getElementsByTagName('li');
  var listLength = listItem.length;
  var list = [];
  for(var i=0; i<listLength; i++)
  list[i] = listItem[i].firstChild.nodeValue;
  list.sort();
  for(var i=0; i<listLength; i++)
  listItem[i].firstChild.nodeValue = list[i];
 }
</script>
</head>
<body>

<ul id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" ondragend="sort('div1')">

    <li id="list-item3"  draggable="true" ondragstart="drag(event)">a</li>
    <li id="list-item5" draggable="true" ondragstart="drag(event)">b</li>
    <li id="list-item2" draggable="true" ondragstart="drag(event)">c</li>
    <li id="list-item4" draggable="true" ondragstart="drag(event)">d</li>
</ul>
<ul id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" ondragend="sort('div2')"></ul>

</body>
</html>

I hope it helps :). I used HTML 5 on it. After an item has been dragged from one list to the other, the function sort() will be called. This function will be the one to sort the items inside the list. I havent tried it yet on form elements but ill see what i can do.

Upvotes: 1

Related Questions