Question

所以，我不知道如何开始工作，所以我打算先在这里问一下。我想创建一些东西，你会有一个东西列表，你可以把它放到一个容器div。在将其删除之后，它会将项目ID的名称添加到url中，以便用户可以通过共享链接与他人共享其内容。是否可以使用jquery？

如果是，怎么样？：C

@edit 这就是我到目前为止所拥有的。 Dragin从一个div掉到另一个

$(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部分 - 移动项目时更新网址中的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");
    }
}

在拖放元素到div时，将ID名称添加到网址

1 个答案: