使用Jquery动态更改图像的src根据可放置对象的ID

我有点卡住如何根据可放置对象的ID使用Jquery更改图像src的一部分。使用Jquery动态更改图像的src根据可放置对象的ID

我试过这个以及其他一些来自网络的想法，但不幸的是没有工作。这是非常棘手的如果我必须这样说。

ui.draggable['<img src= "images/kitchen/.img src" width="800" height="600"/>'].id

此刻我只能够一次图像。

我想我应该做某种函数来执行img src。

<!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>

来源

2013-03-18 Blake Loizides

你能尝试这样的事情？ http://jsbin.com/igociz/1 – a0viedo 2013-03-18 14:19:02

我不明白......你究竟想要做什么？ – Dom 2013-03-18 17:42:31

这应该工作

  <!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>

来源

2013-03-18 17:39:52 Pinaki

感谢万@Pinaki – 2013-03-18 19:15:42

欢迎您:) – Pinaki 2013-03-18 21:08:35

使用Jquery动态更改图像的src根据可放置对象的ID

回答

相关问题