用可拖動的圖像更改可拖放的圖像源

我有一個<div>，其中包含具有「可拖動」類的三個圖像。該表格有四行，最後一個<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>

以下是佈局看起來像下面的圖片：

enter image description here

在表中的圖像拖動到空箱以上桌子。這些框由一個空白圖像組成，我希望該圖像的來源更改爲已放入空白框的圖像。

下面是我在現階段代碼：

$(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'); 
    } 
    }); 
});

來源

2014-11-24 Rinusu

所以有什麼問題嗎？ – Evgeniy 2014-11-24 10:36:48

現在的問題是如何讓空框中的圖像變成放入圖像的圖像。 – Rinusu 2014-11-24 10:39:39

歡迎來到stackoverflow。如果您提供使用JS所需的樣板HTML和CSS，而不僅僅是一個圖像，它將極大地幫助那些試圖幫助您的人。事實上，我們不知道'＃draggable1'，'＃draggable2'等是什麼，或者你的HTML結構。請編輯您的問題並用更多信息進行更新。順便說一句，你應該真的使用一個普通的類，而不是用'id's逐個初始化每個可拖動的，除非初始化選項不同。 – 2014-11-24 13:03:08

裏面的drop事件回調，您可以通過第二個參數（通常稱爲ui）的draggable屬性訪問下跌拖動元素。您可以複製它的來源可放開，如下圖所示：

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

來源

2014-11-24 12:50:58

用可拖動的圖像更改可拖放的圖像源

回答

相關問題