Javascript 使用Jquery根据可拖放对象的ID动态更改图像的src
我有点纠结于如何使用Jquery根据可拖放对象的ID更改图像src的一部分 我在网上尝试了这个和其他一些想法，但不幸的是没有成功。如果我必须这样说的话，这是相当棘手的Javascript 使用Jquery根据可拖放对象的ID动态更改图像的src,javascript,jquery,html,image,drag-and-drop,Javascript,Jquery,Html,Image,Drag And Drop,我有点纠结于如何使用Jquery根据可拖放对象的ID更改图像src的一部分 我在网上尝试了这个和其他一些想法，但不幸的是没有成功。如果我必须这样说的话，这是相当棘手的 ui.draggable['<img src= "images/kitchen/.img src" width="800" height="600"/>'].id ui.draggable[''].id 目前我只能看到这张照片一次 我想我应该做一些函数来执行imgsrc <!doctype html>
ui.draggable['<img src= "images/kitchen/.img src" width="800" height="600"/>'].id
ui.draggable[''].id
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Revert draggable position</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style>
#draggable, #draggable1 { width: 100px; height: 100px; padding: 0; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 800px; height: 600px; padding: 0; float: left; margin: 10px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable1" ).draggable({ revert: "valid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "div" )
.html('<img src= "http://blakeloizides.co.za/sm/images/preview-images/kitchen/medium-cream-kitchen-preview.jpg" width="800" height="600"/>' + "Dropped! " + ui.draggable[0].id);
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<img src="http://blakeloizides.co.za/sm/images/gallery/img12.png" width="100" height="100">
</div>
<div id="draggable1" class="ui-widget-content">
<img src="http://blakeloizides.co.za/sm/images/gallery/img1.png" width="100" height="100">
</div>
<div id="droppable" class="ui-widget-header">
<div><img src="images/kitchen/kitchen-preview-cad.jpg" width="800" height="600"></div>
</div>
</body>
</html>
jQuery UI可拖放-还原可拖放位置
#可拖动，#可拖动1{宽度：100px；高度：100px；填充：0；浮动：左；边距：10px 10px 10px 0；}
#可拖放{宽度：800px；高度：600px；填充：0；浮点：左；边距：10px；}
$（函数（）{
$（“#draggable”）.draggable（{revert:“valid”}）；
$（“#draggable1”）.draggable（{revert:“valid”}）；
$（“#可拖放”）。可拖放({
activeClass：“ui状态悬停”，
hoverClass：“ui状态处于活动状态”，
drop：函数（事件、用户界面）{
$（本）
.addClass（“ui状态突出显示”）
.find（“div”）
.html（“”+“已删除！”+ui.draggable[0].id）；
}
});
});
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Revert draggable position</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style>
#draggable, #draggable1 { width: 100px; height: 100px; padding: 0; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 800px; height: 600px; padding: 0; float: left; margin: 10px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable1" ).draggable({ revert: "valid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
var dragElemId = ui.draggable[0].id;
var imgPath = $('#' + dragElemId).attr("des-image");
$( this )
.find( ".drop-image" ).removeAttr("src").attr("src",imgPath);
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content" des-image="http://blakeloizides.co.za/sm/images/preview-images/kitchen/medium-cream-kitchen-preview.jpg">
<img src="http://blakeloizides.co.za/sm/images/gallery/img12.png" width="100" height="100">
</div>
<div id="draggable1" class="ui-widget-content" des-image="http://blakeloizides.co.za/sm/images/gallery/img12.png">
<img src="http://blakeloizides.co.za/sm/images/gallery/img1.png" width="100" height="100">
</div>
<div id="droppable" class="ui-widget-header">
<div><img class="drop-image" src="images/kitchen/kitchen-preview-cad.jpg" width="800" height="600"></div>
</div>
</body>
</html>
jQuery UI可拖放-还原可拖放位置
#可拖动，#可拖动1{宽度：100px；高度：100px；填充：0；浮动：左；边距：10px 10px 10px 0；}
#可拖放{宽度：800px；高度：600px；填充：0；浮点：左；边距：10px；}
$（函数（）{
$（“#draggable”）.draggable（{revert:“valid”}）；
$（“#draggable1”）.draggable（{revert:“valid”}）；
$（“#可拖放”）。可拖放({
activeClass：“ui状态悬停”，
hoverClass：“ui状态处于活动状态”，
drop：函数（事件、用户界面）{
var dragElemId=ui.draggable[0].id；
var imgPath=$（'#'+dragElemId）.attr（“des图像”）；
$（本）
.find（“.drop image”）.removeAttr（“src”）.attr（“src”，imgPath）；
}
});
});