Make Div Draggable In A Particular Position

these are 5 file browse buttons. when i click them, a file will be uploaded (file will be image) .I want to drag them. if I drag one image to another, the images should only be dra

Solution 1:

here is the UPDATED code you requested, You can change position and style of the box using CSS

<style>div
        {
            margin-bottom:10px;
            height:100px;
        }
        .container
        {
            height:500px;
        }
        .col-md-6,.col-md-5
        {
            border:1px solid #000;
        }
        #div1,#div2,#div3,#div4,#div5 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style><divclass="container"id="container"><divclass="row"><divclass="col-md-offset-3 col-md-5"><divid="div1"ondrop="drop(event)"ondragover="allowDrop(event)"><imgid="drag1"src="http://www.w3schools.com/html/img_logo.gif"draggable="true"ondragstart="drag(event)"width="336"height="69" /></div></div><divclass="col-md-6"><divid="div2"ondrop="drop(event)"ondragover="allowDrop(event)"><imgid="drag2"src="http://jqueryui.com/jquery-wp-content/themes/jquery/content/books/jquery-ui-in-action.jpg"draggable="true"ondragstart="drag(event)"width="336"height="69" /></div></div><divclass="col-md-6"><divid="div3"ondrop="drop(event)"ondragover="allowDrop(event)"></div></div><divclass="col-md-6"><divid="div4"ondrop="drop(event)"ondragover="allowDrop(event)"></div></div><divclass="col-md-6"><divid="div5"ondrop="drop(event)"ondragover="allowDrop(event)"></div></div></div></div><script>functionallowDrop(ev) {
        ev.preventDefault();
    }

    functiondrag(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
    }

    functiondrop(ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");

       if(ev.target.tagName!="IMG"){
        ev.target.appendChild(document.getElementById(data));
}
else{
var _oldDiv= document.getElementById(data).parentNode,
_oldData= document.getElementById(data),

_newDiv=ev.target.parentNode,
_newData=ev.target;

_oldDiv.appendChild(_newData);
_newDiv.appendChild(_oldData);

}

    }
</script>

you can check this in Fiddle