使div在特定位置可拖動

Question

這是5個文件瀏覽按鈕。 當我單擊它們時，一個文件將被上傳（文件將是圖像）。我要拖動它們。 如果我將一張圖片拖到另一張上，則這些圖片只能在這些位置上拖動

我可以將任何圖像拖到任何位置。

我不知道如何開始。 我正在使用jQuery UI元素

Answer 1

這是您請求的更新代碼，您可以使用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>

你可以在小提琴中檢查一下