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

dragged image if not re-sizing and dragging with in the droppable area after dropping ?

本文关键字：区域 图像 拖动 如果不 新调整 调整 拖放      更新时间：2023-09-26

我只是想在图像删除后将图像的克隆拖到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');
    });
    }
    });
});

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

我只是在查看您上一个问题中的请求，我看到您提出了一个新问题。

这是我想到的。

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

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

看一下这个例子。

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

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

$(".ui-draggable").hover(function() 
{
  $(this).addClass('fix');
  $(this).parent().draggable({containment: ".lame"});
  $(this).resizable({containment: ".lame"});
}
相关文章：