jQuery函數可在單擊時打開2個連接的可拖動圖像

Question

我是編程新手，應該很容易，但是我不知道該怎么做。 我需要在一個按鈕上單擊創建2個圖像，一個圖像為主圖像，另一個圖像就像關閉X按鈕。 它們必須已連接並且可拖動。

這是我的功能： Js Fiddle鏈接

<input type="button" id="truck" class="truckbtn" value="ADD Truck" onclick="addtruck()">
<div id="masina">
    <div id="closebutton"></div>
    <div id="truckshow"></div>
</div>

<Script>
    $(document).ready(function() {
        $(".truckbtn").click(function() {
            var truckshow = $('<img height="200" width="100" src="images/Truck1.png">');
            var closebutton = $('<img height="50" width="50" src="images/closeimage2.png">');
            $('div').prepend(truckshow + closebutton);
            truckshow.draggable();
            closebutton.draggable();
        });
    });
</Script> 

Answer 1

在這里，我有一個示例代碼（ JS Fiddle ），該示例代碼使用Jquery UI的 draggable()來拖動DOM內部的組件。 我的按鈕樣式來自Bootstrap ，盡管我使用了節省時間的框架，但是您也可以編寫自定義CSS。

EDITS

單擊按鈕會動態添加圖像。 您可以使用jquery更改<img/>標記的src來動態更改圖像。 讓<img id="myImage"/> then you can set src by $("#myImage").attr("src","your link here"); 。

小提琴