css：hoverでドラッグトランスフォームを行った後のInteract.jsがもう機能しません

Question

私はInteract.jsを検出しましたが、それを有効にできましたが、ドラッグ（慣性を有効にした状態）もう動作しません。カーソル：ポインタはまだ動作します。解決策を考えることができる人は誰ですか？

CSS：

.bubble:hover { 
     transform: scale(1.1); 
     cursor: pointer; 
} 

JS：ここ

interact('.bubble').draggable({ 
      inertia: { 
       resistance: 15, 
       minSpeed: 100, 
       endSpeed: 50 
      }, 
      onmove: function(e) { 
       var target = e.target, 
        // keep the dragged position in the data-x/data-y attributes 
        x = (parseFloat(target.getAttribute('data-x')) || 0) + e.dx, 
        y = (parseFloat(target.getAttribute('data-y')) || 0) + e.dy; 

       // translate the element 
       target.style.webkitTransform = 
        target.style.transform = 
         'translate(' + x + 'px, ' + y + 'px)'; 

       // update the posiion attributes 
       target.setAttribute('data-x', x); 
       target.setAttribute('data-y', y); 
      } 
     }).on('tap', function(e) { 
      console.log('tapped'); 
      e.preventDefault(); 
     }); 

チェックフィドル：事前にhttps://jsfiddle.net/82utnzbx

ありがとう！あなたが原因interact.jsに、すなわちbubbleに適用されている複数の変換のため、これが起こっている

Answer 1

一transformは、オブジェクト（tranlateプロパティ）のx、y座標を変更する適用され、別のtransformを置くとscaleに適用されますオブジェクト。

したがって、JavaScriptのtransformは、CSSの1つを上書きします。

あなたがしなければならないことは、transform: translate()とtransform: scale()の両方のプロパティを自分のjavascript自体に組み合わせることです。

あなたはjquery.hover()を使用してこのコードを使用して静的なtransform: scale() 1で既存のtransformプロパティを追加することによって、上記の操作を行うことができます。

$(".bubble").hover(function() { 
    document.getElementsByClassName("bubble")[0].style.transform += "scale(1.1)"; 
}, function() { 
    // For transformation when bubble has moved already 
    if (document.getElementsByClassName("bubble")[0].style.transform[0] != "s") { 
    document.getElementsByClassName("bubble")[0].style.transform = document.getElementsByClassName("bubble")[0].style.transform.split(")")[0]; 
    } else { 
    // For transformation when bubble has not moved 
    document.getElementsByClassName("bubble")[0].style.transform = ""; 
    } 
}); 

私は、コードを参照してください、あなたのためにそれを働いてきた：

interact('.bubble').draggable({ 
 
    inertia: { 
 
    resistance: 15, 
 
    minSpeed: 100, 
 
    endSpeed: 50 
 
    }, 
 
    onmove: function(e) { 
 
    var target = e.target, 
 
     // keep the dragged position in the data-x/data-y attributes 
 
     x = (parseFloat(target.getAttribute('data-x')) || 0) + e.dx, 
 
     y = (parseFloat(target.getAttribute('data-y')) || 0) + e.dy; 
 

 
    // translate the element 
 
    target.style.webkitTransform = 
 
     target.style.transform = 
 
     'translate(' + x + 'px, ' + y + 'px)'; 
 

 
    // update the posiion attributes 
 
    target.setAttribute('data-x', x); 
 
    target.setAttribute('data-y', y); 
 
    } 
 
}).on('tap', function(e) { 
 
    console.log('tapped'); 
 
    e.preventDefault(); 
 
}); 
 

 
$(".bubble").hover(function() { 
 
    document.getElementsByClassName("bubble")[0].style.transform += "scale(1.1)"; 
 
}, function() { 
 
    // For transformation when bubble has moved already 
 
    if (document.getElementsByClassName("bubble")[0].style.transform[0] != "s") { 
 
    document.getElementsByClassName("bubble")[0].style.transform = document.getElementsByClassName("bubble")[0].style.transform.split(")")[0]; 
 
    } else { 
 
    // For transformation when bubble has not moved 
 
    document.getElementsByClassName("bubble")[0].style.transform = ""; 
 
    } 
 
});

* { 
 
    background-color: #7dd3f4; 
 
} 
 

 
.bubble { 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    border-radius: 50%; 
 
    -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0 10px 30px 5px rgba(255, 255, 255, 1); 
 
    -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0 10px 30px 5px rgba(255, 255, 255, 1); 
 
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0 10px 30px 5px rgba(255, 255, 255, 1); 
 
    width: 120px; 
 
    height: 120px; 
 
    transition: all .3s ease; 
 
    margin-top: 15px; 
 
    margin-bottom: 10px; 
 
    margin-left: 15px; 
 
} 
 

 
.bubble:hover { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="container"> 
 
    <div class="bubble"></div> 
 
    </div> 
 

 
    <script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script> 
 
</body>

またはあなたがチェックすることができます更新。