Как отменить выбор элемента после выбора свободной функции преобразования в jquery? - PullRequest
0 голосов
/ 09 февраля 2019

Для выбора этой функции используется:

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

для отмены выбора я использовал:

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

Проблема: После того, как я нажал «.des», я могуне выбирайте этот элемент снова или другой элемент!

1 Ответ

0 голосов
/ 09 февраля 2019

Чтобы отменить выбор (уничтожить) элемент, который вы можете вызвать .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>
...