Search This Blog

2013/11/19

UL LI based Drag & DROP with Pure Javascipt & HTML 5

   Currently I am working on UL& LI based DRAG & DROP functionality on my own with pure javascript just for fun as HTML 5 is interesting stuff to explore.
  The functionality to drag an element from other UL is fine but some party is still edgy like re arranging LI's within UL.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function dragStart(ev) {
            ev.dataTransfer.effectAllowed = 'move';
            ev.dataTransfer.setData("outerHTML", ev.target.outerHTML);
            ev.dataTransfer.setData("item", ev.target.innerHTML);
            ev.dataTransfer.setData("parent_id", ev.target.parentNode.id);
            ev.dataTransfer.setDragImage(ev.target, 0, 0);
            return true;
        }
        function dragEnter(ev) {
            ev.preventDefault();
        }
        function dragOver(ev) {
            ev.preventDefault()
        }
        function dragDrop(ev) {
           var dragged_li_outer_html = ev.dataTransfer.getData("outerHTML");
            var parent_id = ev.dataTransfer.getData("parent_id");
            var current_id = ev.target.id;
          

            //remove from current location
            for (i = 0; i < document.getElementById(parent_id).children.length; i++) {
                if (document.getElementById(parent_id).children[i].outerHTML == dragged_li_outer_html) {
                    document.getElementById(parent_id).removeChild(document.getElementById(parent_id).children[i]);
                }
            }

            if (parent_id == current_id) {
                //rearrage li of same ui
                alert('Not Supported Yet!');
                return false;
            } else {
                //dragged from other ul and dropped
              
            }
            ev.target.innerHTML = ev.target.innerHTML + dragged_li_outer_html;
            ev.stopPropagation();
            return false;
        }
        function ChilddragDrop(ev) {
            var parent_id = ev.dataTransfer.getData("parent_id");
            var current_id = ev.target.parentNode.id;

            var item = ev.dataTransfer.getData("item");

            if (parent_id == current_id) {
                //rearrage li of same ui
                alert('Not Supported Yet!');
                return false;
            } else {
                //dragged from other ul and dropped

            }

            //remove from source
            for (i = 0; i < document.getElementById(parent_id).children.length; i++) {
                if (document.getElementById(parent_id).children[i].outerHTML == ev.target.outerHTML) {
                    document.getElementById(parent_id).removeChild(document.getElementById(parent_id).children[i]);
                }
            }

            var obj = document.createElement("li");
            for (i = 0; i < ev.target.attributes.length; i++) {
                obj.setAttribute(ev.target.attributes[i].name, ev.target.attributes[i].value);
            }
            var t = document.createTextNode(item);
            obj.appendChild(t);
           
            ev.target.parentNode.insertBefore(obj, ev.target);
            //no bubble up
            ev.stopPropagation();
            return false;
        }
        function dragEnd(ev) {
            ev.preventDefault();
        }
        function mouseup(elt)
        {
           
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <div style="border:1px solid black;width:300px;height:300px">
           <span style="text-align:center;display:block;font-weight:bold;">Empty Bucket</span>
           <ul id="dest" draggable="false" 
                          ondragenter="return dragEnter(event)"
                          ondrop="return dragDrop(event)"
                          ondragover="return dragOver(event)"
                          style="border:1px solid red;width:200px;height:200px;background-color:yellow;margin:auto;">

           </ul>
       </div>
        <div style="border:1px solid black;width:300px;height:300px;">
            <span style="text-align:center;display:block;font-weight:bold;">Fruit Basket</span>
            <ul id="source" draggable="false" style="border:1px solid red;width:200px;height:200px;background-color:red;margin:auto;"
                          ondragenter="return dragEnter(event)"
                          ondrop="return dragDrop(event)"
                          ondragover="return dragOver(event)" >
                        <li draggable="true" ondragstart="return dragStart(event)" onmouseup="mouseup(this)" ondragend="dragEnd(event)" ondrop="return ChilddragDrop(event)">mango</li>
                        <li draggable="true" ondragstart="return dragStart(event)" onmouseup="mouseup(this)" ondragend="dragEnd(event)" ondrop="return ChilddragDrop(event)">orange</li>
                        <li draggable="true" ondragstart="return dragStart(event)" onmouseup="mouseup(this)" ondragend="dragEnd(event)" ondrop="return ChilddragDrop(event)">apple</li>
                        <li draggable="true" ondragstart="return dragStart(event)" onmouseup="mouseup(this)" ondragend="dragEnd(event)" ondrop="return ChilddragDrop(event)">banana</li>
                        <li draggable="true" ondragstart="return dragStart(event)" onmouseup="mouseup(this)" ondragend="dragEnd(event)" ondrop="return ChilddragDrop(event)">pineapple</li>
                        <li draggable="true" ondragstart="return dragStart(event)" onmouseup="mouseup(this)" ondragend="dragEnd(event)" ondrop="return ChilddragDrop(event)">guava</li>
                        <li draggable="true" ondragstart="return dragStart(event)" onmouseup="mouseup(this)" ondragend="dragEnd(event)" ondrop="return ChilddragDrop(event)">jackfruit</li>
                        <li draggable="true" ondragstart="return dragStart(event)" onmouseup="mouseup(this)" ondragend="dragEnd(event)" ondrop="return ChilddragDrop(event)">cashew</li>
            </ul>
        </div>
    </div>
    </form>
</body>
</html>

Here is Screenshot:



Happy Coding !
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)