拖放後的圖像如果沒有重新調整大小並在拖放後拖放到可拖放區域後？

我只是試圖拖動一個圖像克隆一旦它的下降然後我希望該克隆是可拖動和可調整大小，但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到它的工作將可拖動的停止和圖像下移。你可以在這裏看到它Link。另外在小提琴形象沒有下移see !! 但draggable也不在這裏工作。請告訴我如何解決這個問題，或者使用最新的Jquery-ui版本以正確的方式做到這一點。

來源

2013-11-01 Sarthak Sharma

我只是從上一個問題來看你的請求，我看到你問了一個新問題。

這是我想出來的。

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

而是呼籲0.draggable的我們正在.option的div容器調用它。
一旦圖像在.lame中丟失，我們需要使.option（或div）可拖動。而且.options或圖像可以重新定義。當我們這樣做時似乎工作得很好。

看看這個例子。

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

來源

2013-11-01 20:37:57 Trevor

你的小提琴是不工作特雷弗：P：P圖像無法拖動 –

是現在爲你工作 – Trevor

耶小改變和是啊它是:) thanx朋友我的下一個將是如何旋轉放下的圖像。如果可以做到thanxx –

在您的懸停事件中，請嘗試使父級可拖動而不是img本身。當jQuery UI使img標籤可調整大小時，它將其包裹在另一個div中，導致一些問題。

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

來源

2013-11-01 14:04:06 Matt

，這不是做的伎倆亞光我的問題仍然沒有解決:( –

拖放後的圖像如果沒有重新調整大小並在拖放後拖放到可拖放區域後？

回答

相關問題