可调整大小并可拖动在一起，不考虑包含

我想要一个可拖动和可调整大小的图像（从所有句柄），但当从左句柄之一调整图像大小时，拖动图像时不再考虑包含（例如：可以从容器中取出图像）。为什么会发生这种情况，我该怎么办？

代码如下，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>

实际情况是，当您调整右下角以外的任何位置的大小时，拖动山墙的位置不再与可重新调整大小的图像对齐。所以我添加了一些代码来排列拖动山墙和图像。

一旦图像被拖动，在重新调整大小时，它似乎会失去控制。比如，如果你将图像缩小，然后将图像放在右下角并展开，就不再有包容。但这种行为在你原来的小提琴中也是可以复制的。

$(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/

相关内容

最新更新

热门标签：