Fatal编程技术网
  • javascript/
  • Javascript 拖动的div随目标更改位置

Javascript 拖动的div随目标更改位置

javascript jquery

Javascript 拖动的div随目标更改位置,javascript,jquery,drag-and-drop,sortables,Javascript,Jquery,Drag And Drop,Sortables,也许解释起来有点复杂。我有一个网格，上面有9张100 x 100像素的图像，就像这样（每个数字代表一张图片）： 我想要的是，用户可以拖放，例如9对1，他们可以这样改变位置： 9 2 3 4 5 6 7 8 1 jQueryUI中的排序表将不起作用，因为它们的解决方案使用浮动。将所有框“推”到右侧或左侧，例如： 9 1 2 3 4 5 6 7 8 提前感谢。看看这个插件： 这使用了可拖动和可拖放两种方式。可拖动装置在下降时恢复到原来的位置。开始拖动时，DragTable会创建一个函数，用于指定

也许解释起来有点复杂。我有一个网格，上面有9张100 x 100像素的图像，就像这样（每个数字代表一张图片）：

我想要的是，用户可以拖放，例如9对1，他们可以这样改变位置：

9 2 3
4 5 6
7 8 1
jQueryUI中的排序表将不起作用，因为它们的解决方案使用浮动。将所有框“推”到右侧或左侧，例如：

9 1 2
3 4 5
6 7 8
提前感谢。

看看这个插件：

这使用了可拖动和可拖放两种方式。可拖动装置在下降时恢复到原来的位置。开始拖动时，DragTable会创建一个函数，用于指定在何处插入项目被拖放的可拖放文件。当项目被丢弃时，drop函数在其被丢弃的项目之后插入被拖动的项目，并对被丢弃的项目调用insert函数以将可丢弃的项目移动到正确的位置

$(function() {
  $('.item').draggable( {
     containment: 'parent',
     revert: true,
     revertDuration: 0,
     start: function() {
         var that = $(this);
         var previous = that.prev( '.item:last' );
         var next = that.next( '.item:first' );
         that.data( 'insert' , function(elem) {
             if (previous.size() > 0) {
                $(elem).insertAfter(previous);
             }
             else if (next.size() > 0) {
                $(elem).insertBefore(next);
             }
         });
     }
  });
  $('.item').droppable( {
    accept: '.item',
    drop: function(event, ui) {
       var elem = $(this);
       if (elem.siblings('.item').size() > 1) {
           ui.draggable.insertAfter(elem);
           var insert = ui.draggable.data('insert');
           insert(elem);
       }
       else { // case where there are only two elements, swap
           var parent = elem.closest('.container');
           var first = parent.children( '.item:first' );
           var last = parent.children( '.item:last' );
           last.insertBefore( first );
       }
    }
  });
});

<div id="container">
    <span class="item">1</span>
    <span class="item">2</span>
    <span class="item">3</span>
    <span class="item">4</span>
    <span class="item">5</span>
</div>

$（函数（）{
$（'.item'）。可拖动（{
包含：'父'，
回复：对，
持续时间：0，
开始：函数（）{
var，该值=$（此值）；
var-previous=that.prev（'.item:last'）；
var next=that.next（'.item:first'）；
数据（'insert'，函数（elem）{
如果（先前的.size（）>0）{
$（元素）。插入后面（上一个）；
}
else if（next.size（）>0）{
$（elem）.insertBefore（next）；
}
});
}
});
$（'.item'）。可拖放（{
接受：'.item'，
drop：函数（事件、用户界面）{
var elem=$（本）；
if（元素同级（'.item'）.size（）>1）{
ui.可起草的.插入者（elem）；
var insert=ui.draggable.data（'insert'）；
插入（elem）；
}
else{//如果只有两个元素，则交换
var parent=元素最近（'.container'）；
var first=parent.children（'.item:first'）；
var last=parent.children（'.item:last'）；
last.insertBefore（第一）；
}
}
});
});
1.
2.
3.
4.
5.
感谢您的快速回复

您的解决方案看起来不错，但第一个解决方案在更改位置1和2时会抛出一些错误。第二个不太清楚。但是他们帮了很多忙

我试图编写一些代码，我认为这是朝着正确方向迈出的一步。你觉得怎么样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    <title>Drag drop 1</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $(".item").draggable({
            // Elements cannot go outside #container
            containment: 'parent',
            // Make sure the element can only be dropped in a grid
            grid: [150,150],
            start: function(event, ui) {
                // Make sure picture always are on top when dragged (z-index)
                $(this).css({'z-index' : '100'});
                // Show start dragged position
                var Startpos = $(this).position();
                $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
            },
            stop: function(event, ui) {
                // Revert to default layer position when dropped (z-index)
                $(this).css({'z-index' : '10'});
                // Show dropped position
                var Stoppos = $(this).position();
                $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
            }
        });
    });
    </script>
    <style>
    #container {
        width:480px;
        border:1px solid #000;
    }
    .item {
        position:relative;
        width:150px;
        height:150px;
        z-index:10;
    }
    </style>
</head>
<body>
    <div id="container">
        <img id="productid_1" src="images/pic1.jpg" class="item" alt="" title="" /><img id="productid_2" src="images/pic2.jpg" class="item" alt="" title="" /><img id="productid_3" src="images/pic3.jpg" class="item" alt="" title="" /><img id="productid_4" src="images/pic4.jpg" class="item" alt="" title="" /><img id="productid_5" src="images/pic5.jpg" class="item" alt="" title="" /><img id="productid_6" src="images/pic6.jpg" class="item" alt="" title="" /><img id="productid_7" src="images/pic7.jpg" class="item" alt="" title="" /><img id="productid_8" src="images/pic8.jpg" class="item" alt="" title="" /><img id="productid_9" src="images/pic9.jpg" class="item" alt="" title="" />
    </div>
    <div style="clear:both;"></div>
    <div id="start">Waiting...</div>
    <div id="stop">Waiting...</div>
</body>
</html>


拖放1
$（文档）.ready（函数（）{
$（“.item”）.draggable({
//元素不能超出#容器
包含：'父'，
//确保图元只能放置在网格中
网格：[150150]，
开始：功能（事件、用户界面）{
//确保拖动时图片始终位于顶部（z索引）
$（this.css（{'z-index'：'100'）；
//显示开始拖动位置
var Startpos=$（this.position（）；
$（“div#start”）.text（“start:\nLeft:+Startpos.left+”\nTop:+Startpos.top”）；
},
停止：功能（事件、用户界面）{
//放置时恢复到默认图层位置（z索引）
$（this.css（{'z-index'：'10'）；
//显示下降位置
var Stoppos=$（this.position（）；
$（“div#stop”）.text（“stop:\nLeft:+Stoppos.left+”\nTop:+Stoppos.top”）；
}
});
});
#容器{
宽度：480px；
边框：1px实心#000；
}
.项目{
位置：相对位置；
宽度：150px；
高度：150像素；
z指数：10；
}
等待。。。
等待。。。
查看一些实际代码总是有帮助的。HTML、CSS和JS。 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
    <title>Drag drop 1</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $(".item").draggable({
            // Elements cannot go outside #container
            containment: 'parent',
            // Make sure the element can only be dropped in a grid
            grid: [150,150],
            start: function(event, ui) {
                // Make sure picture always are on top when dragged (z-index)
                $(this).css({'z-index' : '100'});
                // Show start dragged position
                var Startpos = $(this).position();
                $("div#start").text("START: \nLeft: "+ Startpos.left + "\nTop: " + Startpos.top);
            },
            stop: function(event, ui) {
                // Revert to default layer position when dropped (z-index)
                $(this).css({'z-index' : '10'});
                // Show dropped position
                var Stoppos = $(this).position();
                $("div#stop").text("STOP: \nLeft: "+ Stoppos.left + "\nTop: " + Stoppos.top);
            }
        });
    });
    </script>
    <style>
    #container {
        width:480px;
        border:1px solid #000;
    }
    .item {
        position:relative;
        width:150px;
        height:150px;
        z-index:10;
    }
    </style>
</head>
<body>
    <div id="container">
        <img id="productid_1" src="images/pic1.jpg" class="item" alt="" title="" /><img id="productid_2" src="images/pic2.jpg" class="item" alt="" title="" /><img id="productid_3" src="images/pic3.jpg" class="item" alt="" title="" /><img id="productid_4" src="images/pic4.jpg" class="item" alt="" title="" /><img id="productid_5" src="images/pic5.jpg" class="item" alt="" title="" /><img id="productid_6" src="images/pic6.jpg" class="item" alt="" title="" /><img id="productid_7" src="images/pic7.jpg" class="item" alt="" title="" /><img id="productid_8" src="images/pic8.jpg" class="item" alt="" title="" /><img id="productid_9" src="images/pic9.jpg" class="item" alt="" title="" />
    </div>
    <div style="clear:both;"></div>
    <div id="start">Waiting...</div>
    <div id="stop">Waiting...</div>
</body>
</html>