使div在特定位置可拖动 [英] Make div draggable in a particular position

问题描述

这是5个文件浏览按钮.当我单击它们时，一个文件将被上传(文件将是图像).我要拖动它们.如果我将一幅图像拖到另一幅图像，则这些图像只能在以下位置拖动:

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.

我不知道如何启动它.我正在使用jquery用户界面元素

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

推荐答案

这是您请求的 UPDATED 代码，您可以使用CSS更改框的位置和样式

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>

您可以在小提琴

这篇关于使div在特定位置可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！