2

ドラッグアンドドロップのUIを少し使って遊んでいますが、DROPに少し困惑しています。ここでフィドルを見る
ことができます。

即時の目標：スパンをいずれかのdiv
に入れる方法を見つける必要があります。 私が正しい道を進んでいると仮定すると、クローンのコンテンツにアクセスするにはどうすればよいですか？.draggable.droppable
append()

究極の目標：最終的には、ドロップゾーンのdivからアイテムを削除し、入力/ divを1つのドロップのみを受け入れるように
制限する方法を追加する必要があります（入力/ divは無制限の数の「ペイロード」を受け入れることができます）。.textfield.textarea

コード：

/* html */
<table>
    <thead>    
        <tr role="row">
            <th class="sorting_asc" role="columnheader" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 494px;" aria-sort="ascending" aria-label="Company: activate to sort column descending">Company</th>
            <th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 66px;" aria-label="Contact">Contact</th>
            <th class="sorting_disabled" role="columnheader" rowspan="1" colspan="1" style="width: 79px;" aria-label="&amp;nbsp;">&nbsp;</th>
        </tr>
    </thead>
    <tbody role="alert" aria-live="polite" aria-relevant="all">
        <tr class="odd">
            <td class="sorting_1 has_draggable_children">
                <span draggable="true" class="ui-draggable" data-companyid="0101" data-companyname="**BD">**BD</span>
            </td>
            <td><a href="#4621">Contacts</a></td>
            <td><a href="#4621">Edit</a>
                <a href="#4621">Delete</a>
            </td>
        </tr>
        <tr class="even">
            <td class="sorting_1 has_draggable_children">
                <span draggable="true" data-companyid="0202" data-companyname="0024" class="ui-draggable">0024</span>
            </td>
            <td><a href="#4438">Contacts</a></td>
            <td><a href="#4438">Edit</a>
                <a href="#4438">Delete</a>
            </td>
        </tr>
        <tr class="odd">
            <td class="sorting_1 has_draggable_children">
                <span draggable="true" class="ui-draggable" data-companyid="0303" data-companyname="Acme, Inc.">Acme Anvil Corp</span>
            </td>
            <td><a href="#4621">Contacts</a></td>
            <td><a href="#4621">Edit</a>
                <a href="#4621">Delete</a>
            </td>
        </tr>
   </tbody>
</table>

<section class="offset7" id="dragged-drop-zone" >
    <div class="look-like-input textfield droppable" contenteditable></div>
    <br />
    <div class="look-like-input textarea droppable" contenteditable></div>
</section>

。

/* js */
// DRAG
$('span[draggable]').draggable({
    revert: true,
    helper: "clone"
});

// DROP
$('.droppable').droppable({
    tolerance: 'pointer',
    drop: function(event, ui) {
        //console.log(this);
        $(this).append($(ui.helper));
    }
});

ありとあらゆるヘルプと提案を歓迎します

4

1 に答える 1

3

了解しました...その底に到達しました。

ただ、clone期待どおりに動作していないようです。
カスタム関数を使用して独自のクローンをオブジェクトにパッケージ化し、それをオブジェクトからプルバックする必要がありますdrop。

jsFiddleで実際の例を見ることができます。
最終的に機能したものは次のとおりです。

// Drag
$('span[draggable]').draggable({
    revert: true,
    helper: function() {
        var container = $('<div/>');
        var dragged = $(this);
        container.append(dragged.clone());
        return container;
    }
});

// Drop
$('.droppable').droppable({
    tolerance: 'pointer',
    drop: function(event, ui) {
        $(this).append($(ui.helper.children()));
    }
});
于 2013-01-14T22:31:04.867 に答える