Возвращение объекта, перенесенного в другой объект

Question

Имеется ряд div-блоков (к ним присвоены классы ui-draggable и ui-draggable-dragging), почти все из которых -- перетаскиваемые. Один из этих блоков принимает в себя объекты, к которым присвоен метод draggable().

$(document).ready(function() {
  $('.ui-draggable').draggable();
  $('#drop').droppable({drop:function() {
    alert();  // $(div, вложенный в #drop).html()
  }});
});

.ui-draggable {
  width: 30pt;
  height: 30pt;
  border: 1pt solid;
 }
 
 #drop {
  width: 60pt;
  height: 60pt;
  border: 2pt solid;
 }

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
  </head>
  <body>
    <div class="ui-draggable ui-draggable-dragging">drag1</div>
    <div class="ui-draggable ui-draggable-dragging">drag2</div>
    <div class="ui-draggable ui-draggable-dragging">drag3</div>
    <div id="drop">drop</div>
  </body>
</html>

Как получить информацию о том, какой объект был вложен в примимаемый div-блок?

Answer 1

Функция которая находится внутри метода .droppable() принимает два аргумента event и ui: $.droppable({drop: function(event, ui){...}}), аргумент ui это объект у которого есть 4 свойства: draggable, helper, position и offset. Нам нужно свойство draggable. Чтоб узнать его внутренности нам достаточно вывести его в консоль console.log(ui.draggable). Там тоже будет 3 свойства но чтоб их не перебирать и не искать свойство со значением текста внутри перетаскиваемого блока просто пишем нулевой индекс [0] возле draggable, а дальше чтоб узнать какой текст находится в перетаскиваемом блоке пишем .innerHTML.

В итоге у нас получается такой код:

$(document).ready(function() {
          $('.ui-draggable').draggable();
          $('#drop').droppable({
            drop:function(event, ui) {
            alert(ui.draggable[0].innerHTML);
          }});
        });

БЛОГ НА HUSL

Возвращение объекта, перенесенного в другой объект

Ответы (1 шт):