时间戳

首页 > 解决方案 > 通过jquery中的自由变换功能选择后如何取消选择元素？

jquery - 通过jquery中的自由变换功能选择后如何取消选择元素？

问题描述

要选择此功能，请使用：

$('.freetransform').click (function(){
    $(lastClickedSegment).freetrans({
        x: -500,
        y: 43,
        angle: 0,
        'rot-origin': "100% 100%"
    })                              
}); 
});

取消选择我使用：

$('.des').click(function(){
    $('.ft-controls').detach(); 
});

问题：单击“.des”后，我无法再次选择此元素或其他元素！

标签： jquerycss-transforms

解决方案

要取消选择（销毁）您可以调用的元素.freetrans('destroy')

var options = {}, lastClickedSegment = $('.trans');

$('.freetransform').click(function() {
  if (!options) { // set default option
    options = {x: 0, y: 0, angle: 45,'rot-origin': "100% 100%"}
  }
  $(lastClickedSegment).freetrans(options)
});

$('.des').click(function() {
  // save the option for next parameter
  options = $(lastClickedSegment).freetrans('getOptions');
  $(lastClickedSegment).freetrans('destroy');
  //$('.ft-controls').detach(); 
});
body {
  margin: 20px
}
#parent_img{position:absolute}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/gthmb/jquery-free-transform@latest/css/jquery.freetrans.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/STRd6/matrix.js@latest/matrix-1.2.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/gthmb/jquery-free-transform@latest/js/jquery.freetrans.js"></script>

<button class="freetransform">freetransform</button>
<button class="des">des</button>
<br><br>

<div id="parent_img">
  <img id="two" src="http://greenethumb.com/github/jquery-free-transform/example/assets/bandit!.png" class="trans" width="200" height="132" />
</div>

推荐阅读