将元素拖放到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

回答

相关问题