이미지를 드래그 한 후 다시 크기를 조정하지 않고 드롭 한 후 드래그 할 수 있습니까?

Question

나는 그 이미지를 복제하기 위해 드래그를 시도하고있다. 그때 나는 그 복제본을 드래그 가능하고 크기를 재조정 할 수 있기를 원하지만 그 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> 

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

jQuery를

만에 작업을 드래그 중지 resizable을 추가하고 이미지가 아래로 이동합니다. 여기서 볼 수 있습니다 Link. 또한 바이올린 이미지에 아래로 이동하지 않았다 see !! 하지만 draggable 또한 여기에서도 작동하지 않습니다. 이 문제를 해결하는 방법을 알려주거나 최신 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를 호출 우리는 .option 컨테이너 사업부에 호출된다.
이미지가 .lame에 삽입되면 .option (또는 div)을 드래그 할 수 있도록 설정해야합니다. 그리고 .options 또는 이미지 크기 조절 가능. 이런 식으로 할 때 꽤 잘 작동하는 것 같습니다.

예제를 살펴보십시오. P : 트릭을 수행 아니에요

는

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