Промяна на източника на изображение на пускащо се с плъзгащо се изображение

Имам <div>, съдържащ трите изображения с клас "dropable". Таблицата има четири реда с изображение вътре в последния <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 структура. Моля, редактирайте въпроса си и го актуализирайте с повече информация. BTW наистина трябва да използвате общ клас, вместо да инициализирате всеки плъзгащ се един по един с 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). Можете да копирате източника му в възможност за пускане, както е показано по-долу:

$(".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="/bg//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