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

但是当向其添加resizable时，拖动停止工作并且图像向下移动。你可以在这里看到Link。同样在小提琴图像上也没有向下移动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"});
        }
    });
});

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

看看这个例子。

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

Answer 2

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

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

拖放图像，如果没有重新调整大小并在放置后拖放到可放置区域？

2 个答案: