jQuery UI可調整大小+ Draggable：消失在下降

我試圖讓圖像被放入一個容器並啓用大小調整，但是，當它被刪除時它會消失，直到被拖動。我在控制檯中沒有錯誤。jQuery UI可調整大小+ Draggable：消失在下降

這似乎是一個CSS生成的問題？我試圖改變Z-索引，但無濟於事。

有沒有人有什麼建議會導致這種情況？

問題在這裏看到： http://jsfiddle.net/xBB5x/9662/

JS：

$(document).ready(function(){ 
    $(".droppableShape").draggable({ 
     helper:'clone' 
    }); 


    $(".canvas").droppable({ 
     accept: ".droppableShape", 
     tolerance: 'fit', 
     drop: function(event,ui){ 

      // Set variables 
      var new_field = $(ui.helper).clone().removeClass('droppableShape'); 
      var droppable_page = $(this); 
      var droppableOffset = $(this).offset(); 

      // Check the tool type 
      switch(new_field.attr('class').split(" ")[0]) { 
       case "strokeTool": 
        new_field.css('top', ui.position.top - droppableOffset.top); 
        new_field.css('left', ui.position.left - droppableOffset.left); 
        break; 
       default: 
        console.log("A class type was not detected"); 
      } 

      new_field.find("img").resizable({ 
       maxHeight: 47, 
       maxWidth: 151, 
       minHeight: 18, 
       minWidth: 60, 
       aspectRatio: 151/47 
      }); 

      // Set Draggable Options 
      new_field.draggable({ 
       containment: droppable_page, 
      }); 

      // Add to drop area 
      $(this).append(new_field); 
     } 
    }); 
});

HTML：

<div class="container">  
    <div id="toolbar"> 
     Tools: 
     <div class="droppableShape strokeTool"> 
      <img width="125" src="http://41.media.tumblr.com/75b247a33fee823ac735d86270cfa813/tumblr_mp5loljbFz1s56exfo1_500.png" /> 
     </div> 

    </div> 

    <div id="canvas_area"> 
     <div class="canvas ui-droppable" id="page1"><img src="http://www.astrologychanneletc.com/wp-content/uploads/2014/09/blankcanvas.jpg"></div> 
    </div> 
</div>

來源

2015-10-15 Nathan_Sharktek

我不知道爲什麼，但在你的img調用.resizable()導致div.ui-wrapper是創建爲其父項，並且此新的div的寬度和高度爲0.解決方案是將c所有.resizable()上new_field而不是img裏面的吧：

new_field.resizable({ 
    maxHeight: 47, 
    maxWidth: 151, 
    minHeight: 18, 
    minWidth: 60, 
    aspectRatio: 151/47 
});

然後，增長/收縮你的img作爲其父div調整大小，添加事件偵聽器：在

new_field.on("resize", function(rEvent, rUI) { 
    new_field.find("img").css({ 
    "width": rUI.size.width, 
    "height": rUI.size.height 
    }); 
});

對我的作品Chrome和Firefox在Linux上。

http://jsfiddle.net/xBB5x/9663/

來源

2015-10-15 16:59:20

感謝您的支持！非常有幫助。我也可以通過在append後聲明字段爲resizeable來解決問題 –

jQuery UI可調整大小+ Draggable：消失在下降

回答

相關問題