[英]jQuery function to open 2 connected, draggable images on click
I am new to programming and it should be easy, however I can't understand how to do it. 我是编程新手,应该很容易,但是我不知道该怎么做。 I need create 2 images on one button click, one image is main, another is like close X button. 我需要在一个按钮上单击创建2个图像,一个图像为主图像,另一个图像就像关闭X按钮。 They must be connected and draggable. 它们必须已连接并且可拖动。
This is my function: Js Fiddle link 这是我的功能: 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>
Here I have a sample code ( JS Fiddle ) using draggable()
of Jquery UI for dragging components inside DOM. 在这里,我有一个示例代码( JS Fiddle ),该示例代码使用Jquery UI的 draggable()
来拖动DOM内部的组件。 My buttons style are from Bootstrap , you can also write custom CSS although I used a framework for saving time. 我的按钮样式来自Bootstrap ,尽管我使用了节省时间的框架,但是您也可以编写自定义CSS。
EDITS EDITS
Image is dynamically added on button click. 单击按钮会动态添加图像。 You can change image dynamically by changing src of <img/>
tag using jquery. 您可以使用jquery更改<img/>
标记的src来动态更改图像。 let <img id="myImage"/> then you can set src by $("#myImage").attr("src","your link here");
让<img id="myImage"/> then you can set src by $("#myImage").attr("src","your link here");
. 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.