7

ドロップ可能領域に要素をドロップするときに html を変更します。

このようなもの: http://the-stickman.com/files/jquery/draggable-sortable.html

しかし、要素の変更をドロップすると、html が配置されます。

その他の例: 最初のドラッグ可能なリストと 2 番目のドロップ可能なリストの 2 つのリストがあります。最初のリストから要素をドラッグし、この要素を 2 番目のリストにドロップすると、要素は 2 番目のリストに複製されます。

ドラッグ:

<a href="#">test</a>

落とす：

<a href="#">test</a>

このhtmlを次のように変更したい

ドラッグ:

<a href="#">test</a>

落とす：

<div class="toggle"><a href="#">test</a></div>
4

4 に答える 4

11

このデモをチェックしてくださいhttp://jsfiddle.net/yeyene/7fEQs/8/

ドロップされた要素は、必要に応じてカスタマイズできます。

$(function() {
    $( "#draggable li" ).draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });

    $( "#sortable" ).sortable({
        revert: true,
        receive: function(event, ui) {
            var html = [];
            $(this).find('li').each(function() {
                html.push('<div class="toggle">'+$(this).html()+'</div>');
            });
            $(this).find('li').replaceWith(html.join(''));
        }
    });
});
于 2013-07-09T07:26:06.060 に答える
5

これは非常に基本的な例ですが、いくつかの異なるケースに適用できるはずです。jQuery UI Draggable + Sortableの例を取り上げ、ウィジェットに加えて、ウィジェットを要素.sortable()にバインドしました。ドロップ可能なウィジェットのイベントで最もスマートな方法ではありませんが、変数の値をチェックして、移動した要素の起源を特定します。（それはソート可能なリストからのものですか、それとも私のドラッグ可能なものの1つからのものですか？）それがドラッグ可能なものの1つからのものである場合、私はそれのHTMLを私が望むものに変更します。それ以外の場合は同じままです（ソート可能な順序を並べ替えるだけなので）.droppable()<ul id="sortable">drop

HTML

<ul>
    <li id="draggable" class="ui-state-highlight">Drag me down</li>
</ul>
<br />
<br />
<br />
<ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

JS

$(function () {
     var origin = 'sortable';
     $("#sortable").droppable({
         drop: function (event, ui) {
             if (origin === 'draggable') {
                 ui.draggable.html('<span>Look at this new fancy HTML!</span>');
                 console.log(ui.draggable);
                 origin = 'sortable';
             }
         }
     }).sortable({
         revert: true
     });
     $("#draggable").draggable({
         connectToSortable: "#sortable",
         helper: "clone",
         revert: "invalid",
         start: function () {
             origin = 'draggable';
         }
     });

 });

デモンストレーション用のjsfiddle

新しい HTML は静的であるため、非常に退屈な例です。しかし、それぞれのドラッグ可能なカスタム ヘルパーがあり、これが新しい HTML になるとします。したがって、たとえば、いくつかの HTML フラグメントを配列に格納し、インデックスなどに適した一致するエントリを選択します。これはどういうわけか次のようになります。

var helpersArr = ['<input type="text" />', '<input type="file" />', '<input type="submit" value="Save" />'];
var helper;
//draggable
helper: function () {
    helper = helpersArr[$(this).index()];
    return helper;
}
//dropppable drop function
ui.draggable.html(helper);

2番目の例のjsfiddle

ヘルパー変数を回避してui.helper代わりに使用することで同じ結果を達成できることは確かですが、その HTML 部分を取得する方法がわかりませんでした。これが必要な方法で機能しない場合は、私に知らせてください。全体として、ドロップされた要素の HTML を変更するというさまざまな目標の開始として、私の例を使用できると思います。

于 2013-07-07T19:11:54.230 に答える
2

私は、はるかに精巧な結果を必要とする同様の問題を抱えていました。私のシステムは、フォーム要素名と ID を持つ他の div を含む左側の div からドラッグしていました。これは、Web フォームになる右側のソート可能な div にドロップされました。追加のマークアップなしでフォームのコンテンツによく似た右側の div が必要だったので、データベースに入る途中で大量の「スクラブ」を行いたくない限り、順序付けられていないリストを使用することは問題外でした。結構です。私の例では、左側のリストからドラッグすると、ドラッグされた要素の ID を使用して、ajax を介してさまざまなものを検索し、ラベル、フォーム要素、および検証をリストのリストに配置する必要があります。そのajaxの結果に基づいて残しました。わかりやすくするために、例から ajax を削除しました。

したがって、本質的には、2 つの横に並んだ div を取得し、リスト接続でドラッグ可能および並べ替え可能にします。重要なのは、Sortable に利用しなければならないコールバック関数があることです。「Receive」コールバックは、ソート可能なリストに新しい要素が追加された場合にのみ発生します。並べ替え時に変更が発生しないように区別する必要があるため、これは重要です。ただし、「受信」だけを使用することはできません。そのコールバックで html を操作しようとすると、ドラッグ先のリストではなく、ドラッグ元のリストに影響するためです。リストの追加かドラッグかを追跡するために、リストの追加の場合は $.data の「newlement」という変数を 1 に設定し、更新コールバックをチェックインして、ドラッグされた html に影響を与えるかどうかを確認します。か否か。私の場合、私はしません

したがって、HTML:

<div class='master_list'>
  <div id="2">First Name</div>
  <div id="3">Last Name</div>
</div>

<div id="webform_container">
</div>

そしてjQuery：

$( ".master_list div" ).draggable({
    connectToSortable: "#webform_container",
    helper: "clone",
    revert: "invalid"
});


$( "#webform_container" ).sortable({
    revert: true,
    cursor: 'pointer',
    placeholder: "placeholderdiv",
    connectWith: '.master_list',
    start: function() {
            /* Clear the value of newelement at start */
        $(this).data('newelement', 0);
    },
    receive: function(event, ui) {
            /* Get id from function and pass to the update to do stuff with */
        $(this).data('id', ui.item[0].id);
            /* Set value of newelement to 1 only when new element is added to list */
        $(this).data('newelement', 1);
    },
    update: function(event, ui) {
        /* If newelement ==1, this is a new element to the list, transform it */
        if ($(this).data('newelement') == 1) {
            var fieldname = ui.item.text();
            ui.item.html('your new html here');         
        }
    }

});

于 2012-11-21T17:17:42.023 に答える
1

sortable のドキュメントを確認してください。ui 要素を使用して、ドロップされたオブジェクトの html を変更できます

http://jqueryui.com/demos/sortable/#event-update

接続されたリストの例と、発生するイベントもここで確認できます

http://jqueryui.com/demos/sortable/#connect-lists

update イベントは、要素の html を変更する場所です。

于 2011-12-13T20:55:24.573 に答える