Question

我希望有一个可拖动和可调整大小的图像（来自所有手柄），但是当从左侧手柄之一调整图像大小时，拖动图像时不再遵守包含（例如：图像可以被带出容器）。为什么会发生这种情况，我该怎么办呢？

代码在下面，并且在这里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>

Answer 1

当你在任何地方调整大小时会发生什么，但右下角是拖曳山墙位置不再与可重新调整大小的图像对齐。所以我添加了一些代码来拖动拖曳山墙和图像。

图像被拖动后，在重新调整大小时似乎失去了它的遏制。就像你将图像调整得很小，然后将图像放到右下方并展开它就不再有遏制了。但是这种行为在你原来的小提琴中也是可以重现的。

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

可调整大小和可拖动的一起不尊重遏制

1 个答案: