javascript - On drag and drop element to div, add an id name to url -

so, didn't knew how start working on planned ask first here. want create have list of things , drop 1 container div. after dropping there add example name of item's id url, users share things sharing link. possible jquery?

if yes, how? :c

@edit have far. dragin , dropping 1 div another

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

});

it appears have set drag , drop part. have not tested it, might want give try:

part 1 - update id list in url when items moved around.

in both of drop functions, can call function update url:

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

then, write function:

function updateurl(){     // selected items     var items = $('.selected_item .merchandiser_image'),         id_list = [];     // gather ids array     for(var i=0; i<items.length; i++){ id_list.push( items[i].id ); }     // insert hash in url, ids, comma separated     window.location.hash = id_list.join(','); } 

part 2 - read list in url on page load, , place items in correct spot.

anywhere inside $(document).ready(), call function:

updatelistfromurl(); 

and declare it:

function updatelistfromurl(){     var hash = window.location.hash;     if(hash){         // replace `,` `,#` list of id css selectors         var list_of_ids = hash.split(',').join(',#');         // append them list of selected items         $(list_of_ids).appendto(".selected_item");     } }