1

我已经审查 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() 方法，但遇到了困难。

    任何帮助将不胜感激！

    谢谢你！

    • 4

    2 回答 2

    1

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

    redbox.draggable({
     handle: '.handler',
     snap : '.container',
     containment : '.container'
});
    于 2012-12-26T19:36:48.737 回答
    1

    见这里。

    你是这个意思吗？

    我使用了可排序的：

    $(function(){
    var counter = 0;

    $('.container').sortable();
    $('#creaters').click(function() {
    于 2012-12-26T19:50:43.903 回答