divにドラッグアンドドロップする要素で、URLにID名を追加します

Question

だから私は最初に作業を開始する方法を知らなかったので、ここで最初に質問するつもりでした。 私はあなたが物事のリストを持っていて、あなたはそれを1つのコンテナdivにドロップすることができるものを作りたいと思っています。そこにドロップした後、例えば、アイテムのIDの名前をURLに追加すると、ユーザーはリンクを共有することで自分のものを他のものと共有することができます。 jqueryを使用することは可能ですか？

はいの場合はどうですか？ ：C

@edit これは私がこれまで持っていたものです。 ドラッグして1つの部門から別の部門にドロップする

$(document).ready(function() { 
$(".merchandiser_image").draggable({ cursor: "crosshair", revert: "invalid" }); 
$(".selected_item").droppable({ 
    accept: ".merchandiser_image", 
    drop: function (event, ui) { 
     console.log("drop"); 

     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(dropped).detach().css({ top: 0, left: 0 }).appendTo(droppedOn); 


    }, 
    over: function (event, elem) { 

     console.log("over"); 
    } 
       , 
    out: function (event, elem) { 

    } 
}); 
$(".selected_item").sortable(); 

$(".klatka").droppable({ 
    accept: ".merchandiser_image", drop: function (event, ui) { 
     console.log("drop"); 

     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(dropped).detach().css({ top: 0, left: 0 }).appendTo(droppedOn); 


    } 
}); 

}）;

Answer 1

ドラッグアンドドロップの設定はすべて完了しているようです。私はそれを試していませんが、これを試してみてください：

パート1 - アイテムを移動するときにURLのIDリストを更新します。あなたのdrop機能の両方で

、あなたはURLを更新するための関数を呼び出すことができます。

drop: function (event, ui) { 
    // ... 
    updateURL(); 
}, 

次に、この関数を書く：

function updateURL(){ 
    // Get all selected items 
    var items = $('.selected_item .merchandiser_image'), 
     id_list = []; 
    // Gather their IDs into an Array 
    for(var i=0; i<items.length; i++){ id_list.push(items[i].id); } 
    // Insert a hash in the URL, with the IDs, comma separated 
    window.location.hash = id_list.join(','); 
} 

パート2 - でリストを読みますページのURLを読み込み、アイテムを正しい場所に配置します。

どこでもあなたの$(document).ready()内部に、この関数を呼び出す：

updateListFromURL(); 

そして、それを宣言します。

function updateListFromURL(){ 
    var hash = window.location.hash; 
    if(hash){ 
     // replace `,` with `,#` to get a list of ID CSS selectors 
     var list_of_ids = hash.split(',').join(',#'); 
     // Append them to your list of selected items 
     $(list_of_ids).appendTo(".selected_item"); 
    } 
}