1

私はかなり長い間jQueryとJavascriptを見直してきましたが、それらのプログラミングの考え方を理解するのに苦労しています。以前のスタックオーバーフロー スレッドを見つけて、この学習演習で念頭に置いていた仕様に変更した後、各 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 内の要素を開始し、各レッドボックス要素を

  • 声明ですが、それは無益であることが証明されています。

    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 に答える