将一个 div 变成一个可拖动的元素，可以捕捉到位答案

【问题标题】：Turning a div into a draggable element that can be snapped into position将一个 div 变成一个可拖动的元素，可以捕捉到位
【发布时间】：2012-12-26 19:29:08
【问题描述】：

我已经审查 jQuery 和 Javascript 已经有一段时间了 - 但我很难进入为它们编程的心态。在找到以前的 stackoverflow 线程并将其修改为我为这次学习练习所考虑的规范后，我很难将每个 div 转换为可排序/可拖动的元素。

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>seed</title>  
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<style type='text/css'>
    .redbox {
    position: relative;
    display: block;
    width: 780px;
    height: auto;
    background: red;
    }

    .togglecontainer
    {

        width: 780px;
        height: auto;   
    }

    .handler {
        width: 780px;
        height: auto;
        background: yellow;
    }  

    .container {
        position: relative;
        width: 780px;
        height: 780px;
        background: blue;
    }

    .complete { text-decoration: line-through; color: grey;
    }

    input { padding:2px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; font-size:20px;}


</style>
<script type='text/javascript'>
// taken from http://jsfiddle.net/davidThomas/XsCAN/6/ 
// http://stackoverflow.com/questions/4639487/remove-specific-box-with-jquery
$(function(){
    var counter = 0;

    $('#creaters').click(function() {
        counter++;
        var redbox = $('<div class="redbox"><div class="handler"> ' + (counter) + ')<input name ="thestep" type="text" value="" maxlength="255" size="65" /></div><div class="togglecontainer"></div></div>').appendTo('.container'),
            appendbtn = $('<button class="appendbtn">Add a link to a pic/vid</button>').appendTo(redbox.find('.togglecontainer')),
            togglebtn = $('<button class="togglebtn">Hide options</button>').appendTo(redbox.find('.handler')),
            deletelistbtn = $('<button class="deletelistbtn">X</button>').appendTo(redbox.find('.handler'));

        redbox.draggable({
            handle: '.handler'
        });

        appendbtn.click(function() {
            var elems = $('<div><input value="some value"  type="text" class="inputfield' + (counter) + '"/>' + '<input type="button" class="removebtn" value="x" id="removebtn"' + (counter) + '"/>' + '</div>').insertBefore(redbox.find('.togglecontainer'));
        });

        $('.removebtn').live('click', function() {
            $(this).parent().remove();
        });

        $('.deletelistbtn').live('click', function() {
            $(this).closest('.redbox').remove();
        });


        togglebtn.click(function() {
            var that = this;
            $('.togglecontainer', redbox).toggle(10, function() {
                var txt = $(that).html();
                $(that).html((txt == 'Hide options') ? 'add media' : 'Hide options');
            });
        });
        togglebtn.trigger("click");

    });

});
</script>
</head>
<body>
  <button id="creaters">Add a Step</button>
<div class="container"></div>
</body>
</html>

目前，代码将每个 .redbox 类转换为可拖动的 jquery 元素，但是它们不会“对齐”到位，不会停留在容器 div 的范围内，也不会在被拖动到新位置后移动它们下方的周围元素.

到目前为止，我已经尝试在容器 div 中初始化一个元素，并将每个 redbox 元素变成一个

声明，但它已被证明是徒劳的。

我也尝试过 draggable() 和 sortable() 方法，但遇到了困难。

任何帮助将不胜感激！

谢谢！

【问题讨论】：

标签： javascript jquery jquery-ui-draggable

【解决方案1】：

见here。

这是你的意思吗？

我使用了可排序的：

$(function(){
    var counter = 0;

    $('.container').sortable();
    $('#creaters').click(function() {

【讨论】：

这正是我想要的，非常感谢您的帮助！你差点让我热泪盈眶，再次感谢

【解决方案2】：

好吧，我没有看到您在可拖动功能中添加快照和包含元素选项。

redbox.draggable({
     handle: '.handler',
     snap : '.container',
     containment : '.container'
});

【讨论】：

太棒了！当被拖动的 div 被释放时，关于如何使其他 div 类移动的任何建议？
使用可排序的，如果这是你需要的，请参阅上面的回答