Question

这些是5个文件浏览按钮。当我点击它们时，将上传一个文件（文件将是图像）。我想拖动它们。如果我将一个图像拖到另一个图像，图像只能在这些位置

中拖动

我可以在任何位置拖动任何图像。

我不知道如何开始它。我正在使用jquery UI元素

Answer 1

这是您请求的 UPDATED 代码，您可以使用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>

您可以在Fiddle

中查看此内容

使div在特定位置可拖动

1 个答案: