Перетаскивание: получить целевые атрибуты (ID, внутренний HTML)

Question

Я использую перетаскивание. Есть один элемент, который я могу сбросить на две разные цели. Для простоты кода я подумал, что было бы лучше иметь только одну функцию капли, внутри которой я смотрю, где элемент был сброшен. Тем не менее, я новичок в Javascript DOM-манипуляциях и не знаю, как этого добиться.

function drag(ev) { 
    ev.dataTransfer.setData("text", ev.target.innerHTML); 
    var data = ev.dataTransfer.getData("text"); 
} 

function drop(ev) { 
    ev.preventDefault(); 
    var username = ev.dataTransfer.getData("text"); 
    var type = ev.target.innerHTML; //<====== ?? what's the proper way to do this? 
    alert("Adding " + username +" to chat. Type: "+ type); 
    socket.emit('add to convo',username); 
} 

Вот HTML:

<div id = "dragboxes"> 
     <div id="samechatbox" ondrop="drop(event)" ondragover="allowDrop(event)"> 
      <p> Add to <b>This</b> Chat </p> 
     </div> 
     <div id="newchatbox" ondrop="drop(event)" ondragover="allowDrop(event)"> 
      <p> Add to <b>New</b> Chat </p> 
     </div> 
    </div> 

Так внутри функции перетаскивания, я хотел бы иметь возможность получить целевые идентификаторы, либо «samechatbox» или «newchatbox».

Answer 1

Использование target.id. Я думаю, это то, что вы ищете. Вам не нужно innerHtml за то, что вы описали.

Answer 2

Я сделал то же самое, используя сортировку.

это следующий код. я думаю, это вам поможет:

$(function() { 
       $(".droppable").sortable({ 
        connectWith: ".droppable", 
        receive: function(e, ui) { 
         alert($(e.target).attr('id')); //it give the id of dropped location 
         console.log(ui.item[0].id); // it gived the id of dropped object 
        } 
       }) 
      });