可調整大小和拖動在一起不尊重遏制

我想有一個可拖動和可調整大小（從所有句柄）的圖像，但是當圖像從左手柄之一調整大小時，當圖像是拖動（例如：圖像可以從容器中取出）。爲什麼會發生這種情況，我該怎麼辦？可調整大小和拖動在一起不尊重遏制

代碼如下，和的jsfiddle這裏：http://jsfiddle.net/F4c8p/

<!DOCTYPE html> 
    <html lang="en"> 
     <head> 
      <meta charset="utf-8"/> 
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
      <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
      <script> 
       $(function() { 
       $("#draggable").draggable({ 
        containment: '#container' 
       }); 
       $('#resizable').resizable({ 
        containment: '#container', 
        handles: 'all' 
       }); 
       }); 
      </script> 
     </head> 
     <body> 
      <div style="width: 800px; height: 600px; border: 1px solid black" id="container"> 
      <div id="draggable" style="display:inline-block">  
       <img id="resizable" src="http://www.extremetech.com/wp-content/uploads/2013/05/image-1.jpg"/> 
      </div> 
      </div> 
     </body> 
    </html>

來源

2013-12-08 luqita

嘗試Java腳本代碼之前加載你的形象。所以這樣的圖像加載第一..這是否有意義？這是一個jsfiddle別人做的：http://jsfiddle.net/VKe5h/ – BuddhistBeast

我可以得到我的答案一些反饋？ – Trevor

正在發生的事情是，當你調整任何地方，但右下角是拖動山牆位置不再排隊與重相當大的圖像。所以我添加了一些代碼來排列拖曳山牆和圖像。

一旦圖像被拖動，重新調整尺寸時似乎會失去控制。就像如果您調整圖像的大小然後將圖像放在右下方並展開圖像，則不再有遏制。但是這種行爲在原來的小提琴中也是可重現的。

$(function() { 

    $(".draggable").draggable({ 
     containment: '#container' 
    }); 

    $('#resizable').resizable({ 
     containment: '#container', 
     handles: 'all', 
     stop: function(event, ui) { 
      var draggable = ui.helper.closest('.draggable'); 
      var dragPos = draggable.position(); 
      var left = dragPos.left + ui.position.left; 
      var top = dragPos.top + ui.position.top; 
      draggable.css('left',left+'px'); 
      draggable.find('.ui-wrapper').css('left','auto'); 
      draggable.css('top',top+'px'); 
      draggable.find('.ui-wrapper').css('top','auto'); 
     } 
    }); 
});

例

http://jsfiddle.net/trevordowdle/F4c8p/2/

來源

2013-12-09 22:53:51 Trevor

@luqita我可以針對我的回答得到一些反饋嗎？謝謝 – Trevor

可調整大小和拖動在一起不尊重遏制

回答

相關問題