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

У меня есть <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');
    }
  });
});

jquery draggable jquery-ui jquery-ui-draggable jquery-ui-droppable
person Rinusu    schedule 24.11.2014    source источник
comment
так в чем вопрос?   -  person Evgeniy    schedule 24.11.2014
comment
Вопрос в том, как мне заставить изображение в пустом поле измениться на изображение, которое на него перебрасывается.   -  person Rinusu    schedule 24.11.2014
comment
Добро пожаловать в StackOverflow. Тем, кто пытается помочь вам, будет очень полезно, если вы предоставите шаблонный HTML и CSS, необходимый для работы с вашим JS, а не просто изображение. Как бы то ни было, мы не знаем, что такое #draggable1, #draggable2 и т. д., или вашу структуру HTML. Пожалуйста, отредактируйте свой вопрос и обновите его, добавив дополнительную информацию. Кстати, вам действительно следует использовать общий класс, а не инициализировать каждый перетаскиваемый один за другим с помощью id, если только параметры инициализации не отличаются.   -  person T J    schedule 24.11.2014
comment
Я попытался добавить несколько фрагментов из моего HTML и внес несколько изменений в jQuery. Надеюсь, что это более полезно, так как я был бы очень признателен за любую помощь в моей проблеме.   -  person Rinusu    schedule 24.11.2014
comment
@Rinusu Помогает ли ответ (установка источника droppables на ui.draggable.attr("src") ) ..?   -  person T J    schedule 24.11.2014
comment
Да, действительно. Спасибо большое за вашу помощь.   -  person Rinusu    schedule 24.11.2014

Ответы (1)


arrow_upward
1
arrow_downward

Внутри обратного вызова события 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!" />

person T J    schedule 24.11.2014