Изменение источника изображения отбрасываемого с помощью перетаскиваемого изображения

Question

У меня есть <div>, содержащий три изображения с классом «droppable». Таблица имеет четыре строки с изображением внутри последнего элемента <td>.

HTML, выглядит следующим образом:

<div id="box_container"> 
    <img id="empty_box1" class="droppable" src="images/tom.png" /> 
    <img id="empty_box2" class="droppable" src="images/tom.png" /> 
    <img id="empty_box3" class="droppable" src="images/tom.png" /> 
</div> 

<td><img id="" class="draggable" src="images/image1.png" /></td> 

Ниже картина того, как макет выглядит, как показано ниже:

Изображения в таблице перетаскивать в пустые коробки выше стол. Ящики состоят из изображения белого пространства, и я хочу, чтобы источник этого изображения изменился на изображение, которое было сброшено в пустое поле.

Ниже мой код на современном этапе:

$(document).ready(function() { 
    $(".draggable").draggable({ 
    revert: true, 
    snap: ".droppable", 
    snapMode: "inner" 
    }); 
    $("#tabellen").tablesorter(); 
    $(".droppable").droppable({ 
    accept: ".draggable", 
    drop: function() { 
     console.log(this); 
     var new_pic = $('.draggable').attr('src'); 
     $(this) 
      .attr('src', new_pic) 
      .attr('width', 150) 
      .attr('height', 150) 
      .addClass('zoomable'); 
    } 
    }); 
}); 

Answer 1

Внутри обратного вызова drop события, вы можете получить доступ к отброшенной перемещаемой элемента через draggable свойства второго аргумента (обычно названный как ui). Вы можете скопировать это источник Droppable, как показано ниже:

$(".draggable").draggable({ 
 
    helper: "clone", 
 
    revert: "invalid" 
 
}); 
 
$(".droppable").droppable({ 
 
    drop: function(event, ui) { 
 
    $(this).attr("src", ui.draggable.attr("src")); 
 
    } 
 
});

img { 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.draggable { 
 
    background: hotpink; 
 
    float: left; 
 
} 
 
.droppable { 
 
    float: right; 
 
    background: dodgerblue; 
 
}

<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 
 
<img class="draggable" src="http://i49.tinypic.com/28vepvr.jpg" /> 
 
<img class="droppable" src="" alt="Drop Here!" />