將元素拖放到div時，將url名稱添加到url

因此，我不知道如何開始處理它，所以我打算先在此處詢問。我想創建一些東西，你會得到一個列表的東西，你可以把它放到一個容器格。在刪除它之後，它會將例如項目ID的名稱添加到URL中，以便用戶可以通過共享鏈接與他人分享他們的內容。是否有可能與jQuery做？將元素拖放到div時，將url名稱添加到url

如果是，如何？：C

@edit 這是我到目前爲止。 Dragin和從一個格到另一個格

$(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); 


    } 
});

}）;

來源

2016-08-01 Harugawa

嗨。您的問題包含多個問題：能夠拖放項目，更改URL，從URL中提取ID以便在共享URL時將項目添加到容器。將問題分解爲小問題，嘗試解決問題，如果您遇到問題，請回到這裏，附上一些代碼，以便我們爲您提供幫助。（順便說一句，是的，這是完全可以實現與JS，和jQuery將使它容易處理拖放部分） – blex

@blex編輯我的文章，不知道它是否有幫助 – Harugawa

看起來你已經爲拖放部分設置了一切。我沒有測試過，但你可能想試試這個：

第1部分 - 當項目移動時更新URL中的ID列表。

在您的兩個drop功能，你可以調用一個函數來更新網址：

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"); 
    } 
}

來源

2016-08-01 14:08:10 blex

謝謝，我谷歌搜索了幾個小時，但couldn真的找不到任何關於它的文章。它給了我現在一個想法如何做到這一點：3 – Harugawa

將元素拖放到div時，將url名稱添加到url

回答

相關問題