Make div draggable in a particular position

Question

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 draggable in these positions

I can drag any image at any position.

I dont know how to start it. I am using jquery UI elements

Answer 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>

<div class="container" id="container">
    <div class="row">
        <div class="col-md-offset-3 col-md-5">  
            <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
                <img id="drag1" src="http://www.w3schools.com/html/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />
            </div>
        </div>
        <div class="col-md-6">  
            <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
                <img id="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>
        <div class="col-md-6">
            <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </div>
        <div class="col-md-6">  
            <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </div>
        <div class="col-md-6">
            <div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        </div>
    </div>

</div>
<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");

       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