用css放大拖放

Question

昨天我遇到了拖放問題。感謝EdenSource提供快速幫助。

今天我想縮小/放大。我爲此使用css3縮放。

在這個小提琴你看到我的問題。如果您嘗試使用jQuery ui拖動元素，則該幫助器將作爲我的coursor位於另一個位置。

這是我的javascript代碼：

$(document).ready(function() { 
    $(".card").draggable({ helper: "clone", 
          cursorAt: { top: 76, left: 101 }, 
          opacity: 0.5, 
          scroll:true, 
          refreshPositions: true, 
          scrollSensitivity: 100}); 
    $(".card__dropzone--inner").droppable({ 
     activeClass: "card__dropzone--active", 
     over: function(event) { 
      $(this).animate({ 
       width: "250px" 
      }, 200); 
      console.log("over"); 
     }, 
     out: function(event) { 
      console.log("now?!"); 
      $(event.target).animate({ 
       width: "25px" 
      },200); 
      console.log("out"); 
     }, 
     drop: function(event) { 
      console.log("drop"); 
     } 
    }); 
}); 

http://jsfiddle.net/mp085ead/2/

我如何能得到我的助手回到我的coursor的中間，而使用CSS3變焦？

Answer 1

Finaly找到了解決方案。

jQuery-UI無法使用縮放。即使變焦並不是放大物體的最佳方式。

更好的方法是使用像dragular或tweenmax這樣的庫。當css-zoom不是1時，兩者都能夠拖/放。

但是我們決定使用變換比例。