1

我只是想将图像的克隆拖放到 div 中，然后我希望该克隆可以拖动和调整大小，但containment仅在该 div 中。当我在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');
    });
    }
    });
});

但是当添加resizable到它时，可拖动停止工作并且图像向下移动。你可以在这里看到它链接。同样在小提琴图像上没有向下移动看到！ 但是draggable在这里也不起作用。请告诉我如何解决此问题，或者使用最新的 Jquery-ui 版本以正确的方式执行此操作。

4

2 回答 2

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和.lamediv 不会跨越整个屏幕。

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"});
        }
    });
});

我们在容器 div.draggable上.options调用它，而不是调用它。 一旦图像被放入，我们需要使（或 div）可拖动。并且或图像可调整大小。当我们这样做时，似乎工作得很好。.option
.lame.option.options

看看这个例子。

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

于 2013-11-01T20:37:57.800 回答
0

在您的悬停事件中，尝试使父级可拖动而不是 img 本身。当 jquery ui 使 img 标记可调整大小时，它会将其包装在另一个 div 中，从而导致一些问题。 

$(".ui-draggable").hover(function() 
{
  $(this).addClass('fix');
  $(this).parent().draggable({containment: ".lame"});
  $(this).resizable({containment: ".lame"});
}
于 2013-11-01T14:04:06.767 回答