3

jQuery UI を使用して div をテーブルの列にドラッグし始めたところです。背景色とテキストが異なるいくつかのドラッグ可能な div があり、クローンとしてドロップ領域までドラッグできるようにする必要があります。これは、jQuery UI のサンプル ショッピング カート コードを使用して問題なく動作しましたが、テキストだけでなくオブジェクト全体がドラッグされるように編集しましたが、helper:clone があるにもかかわらず、何らかの理由でクローン機能が削除されます。

これが私のコードです：

<script>
$(function() {
    $( "ul li" ).draggable({
        appendTo: "body",
        helper: "clone"});
    $( ".day #drag" ).draggable({
        appendTo: "body"});
    $( ".day" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            var targetElem = $(this).attr("id");

            $( this ).addClass( "ui-state-highlight" );
            $( ui.draggable ).appendTo( this );
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $( this ).removeClass( "ui-state-default" );
        }
    });
});
</script>

列の例:

<td>
   <div id="monday" class="day monday ui-widget-content"></div>
</td>

ドラッグ可能な要素:

<li><div style="background-color:#<?=$bgColor?>;color:<?=$textColor?>;" id="drag" class="<?=$subject?>"><?=$row['name']?></div></li>

それは本質的にタイムテーブル設定ツールです。お手伝いありがとう

参照用の jsFiddle は次のとおりです: http://jsfiddle.net/x5T4h/

4

1 に答える 1

3

それがまさにあなたが望むものかどうかはわかりませんが、ここから始めるのが良いでしょう: http://jsfiddle.net/x5T4h/2/

基本的に、2番目のオブジェクト宣言を削除し、イベントdraggable内の要素を複製するクローン関数を追加しましたdrop$( ui.draggable ).clone().appendTo( this );

$(function() {
    $( "ul li" ).each(function(){
        $(this).draggable({
            helper: "clone"
        });
    });

    $( ".day" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        accept: ":not(.ui-sortable-helper)",
        drop: function( event, ui ) {
            var targetElem = $(this).attr("id");
            $( ui.draggable ).clone().appendTo( this );
        }
    }).sortable({
        items: "li:not(.placeholder)",
        sort: function() {
            $( this ).removeClass( "ui-state-default" );
        }
    });
});​
于 2012-10-28T08:25:28.147 に答える