javascript - 如果在放置后不重新调整大小并在可放置区域中拖动，则拖动图像？

Question

我只是尝试将图像的克隆拖到 div 中，然后我希望该克隆可拖动且可调整大小，但仅在该 div 中包含 containment 。当我制作克隆图像时，它在此处工作正常 Jfiddle!! .

HTML

    <div class="option" id="f">
    <img class="options" src="http://lorempixel.com/90/90/" alt=""/>
</div>
<div class="lame">
    <img src="http://placehold.it/350x150" alt=""/>
</div>

Jquery

    $(function() {
    $( ".options" ).draggable({ cursor: "pointer",opacity: 0.6,helper: "clone"
        });
   $(".lame").droppable({ accept:".options",drop: function(event, ui) {
    $.ui.ddmanager.current.cancelHelperRemoval = true;
    $(".ui-draggable").hover(function() {
        $(this).addClass('fix');
        $(this).draggable({containment: ".lame"});
    }, function() {
        $(this).removeClass('fix');
    });
    }
    });
});

但是当向其添加可调整大小时，可拖动功能将停止工作并且图像向下移动。你可以在这里看到它Link 。同样在 fiddle 图像上没有向下移动 see !! 但可拖动在这里也不起作用。请告诉我如何解决此问题，或者使用最新的 Jquery-ui 版本以正确的方式执行此操作。

Answer 1

我刚刚查看了您上一个问题的请求，发现您提出了一个新问题。

这是我的想法。

HTML

<div class="option" id="f" style="display:inline-block;">
  <img class="options" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpqrkAF5pPbe8N9fko9gLyZalAyeSm4p-dyU72YD3FuvmDHCW4" alt=""/>
</div>
<br>
<div class="lame" style="display:inline-block;">
   <img src="http://placehold.it/350x150" alt=""/>
</div>

注意 style="display:inline-block;" 这很重要，这样您的 .option 和 .lame div 就不会横跨整个屏幕。

jQuery

$(function() {
    $( ".option" ).draggable({ cursor: "pointer",opacity: 0.6,helper: "clone"});
    $(".lame").droppable({ 
        accept:".option",drop: function(event, ui) {
            $.ui.ddmanager.current.cancelHelperRemoval = true;
            $(ui.helper).draggable({cursor : "pointer",opacity: 0.6,containment :".lame"});
            $(ui.helper).find('.options').resizable({containment : ".lame"});
        }
    });
});

我们不是在 .options 上调用 .draggable，而是在容器 div 的 .option 上调用它。
将图像放入 .lame 后，我们需要使 .option (或 div)可拖动。并且 .options 或图像可调整大小。当我们这样做时，似乎效果很好。

看一下示例。

http://jsfiddle.net/7kkW3/2/