使用 rotatable class 停止元素在鼠标滚动时移动

Question

我目前正在开发一个拖放式 Web 应用程序，用户可以在该应用程序上规划选取框布局。

部分功能是用户可以旋转 canvas 上的某些家具。但是，当您的鼠标指针悬停在可旋转元素上时滚动似乎也会旋转该元素，这会导致问题，特别是如果用户已经完成了他们的布局，然后向下滚动页面以填写表单 - 可能会弄乱布局。

该应用程序使用 jQuery 中的可旋转 class，并实现了可拖放的 classes。

这是我的javascript:

$(function() {
  //Make every clone image unique.
  var counts = [0];
  var resizeOpts = {
    handles: "all",
    autoHide: true
  };
  var nw = $("<div>", {
    class: "ui-rotatable-handle"
  });
  var ne = nw.clone();
  var se = nw.clone();

  $('.box div.ui-rotatable-handle').addClass("ui-rotatable-handle-sw");
  nw.addClass("ui-rotatable-handle-nw");
  ne.addClass("ui-rotatable-handle-ne");
  se.addClass("ui-rotatable-handle-se");

  $(".dragImg").draggable({
    helper: "clone",
    //Create counter
    start: function() {
      counts[0]++;
    }
  });


  $("#dropHere").droppable({
    drop: function(e, ui) {
      if (ui.draggable.hasClass("dragImg")) {
        $(this).append($(ui.helper).clone());
        //Pointing to the dragImg class in dropHere and add new class.
        $("#dropHere .dragImg").addClass("item-" + counts[0]);
        $("#dropHere .img").addClass("imgSize-" + counts[0]);

        //Remove the current class (ui-draggable and dragImg)
        $("#dropHere .item-" + counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging").addClass('rotatable');

        $('.rotatable').resizable().rotatable();
        //$(".rotatable").append(nw, ne, se);
        $(".small-table div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
          $('.rotatable').resizable().rotatable();
          $('.rotatable').rotatable("instance").startRotate(e);
        });

        $(".item-" + counts[0]).dblclick(function() {
          $(this).remove();
        });

        make_draggable($(".item-" + counts[0]));
        $(".imgSize-" + counts[0]).resizable(resizeOpts);
      }

    }
  });


  var zIndex = 0;

  function make_draggable(elements) {
    elements.draggable({
      containment: 'parent',
      start: function(e, ui) {
        ui.helper.css('z-index', ++zIndex);
      },
      stop: function(e, ui) {}
    });
  }
});

如您所见，每个被拖动的项目一旦被拖放到拖放区 (#dropHere div) 上就会被克隆，然后除非被双击，否则会保留在那里。我想知道，如果用户将鼠标滚动到元素上，有什么方法可以阻止元素旋转吗？

编辑：这是应用程序的 FIDDLE：

Answer 1

请注意，您可以通过传递参数 as 和 object 来配置可旋转，这些参数之一是 wheelRotate 默认设置为 true ，因此您只需创建一个包含此参数的对象使用 false 值：var rotateParams = {wheelRotate:false}; 然后将对象传递到 rotatable() 函数中，如下所示：

$('.rotatable').resizable().rotatable(rotateParams);

请看下面的工作片段： // 添加了注释

$(function() {
  //Make every clone image unique.
  var counts = [0];
  var resizeOpts = {
    handles: "all",
    autoHide: true
  };
  var nw = $("<div>", {
    class: "ui-rotatable-handle"
  });
  var ne = nw.clone();
  var se = nw.clone();

  $('.box div.ui-rotatable-handle').addClass("ui-rotatable-handle-sw");
  nw.addClass("ui-rotatable-handle-nw");
  ne.addClass("ui-rotatable-handle-ne");
  se.addClass("ui-rotatable-handle-se");

  $(".dragImg").draggable({
    helper: "clone",
    //Create counter
    start: function() {
      counts[0]++;
    }
  });

  /****** adding config param ******/
  var rotateParams = {
    wheelRotate: false
  };
  /**/
  $("#dropHere").droppable({
    drop: function(e, ui) {
      if (ui.draggable.hasClass("dragImg")) {
        $(this).append($(ui.helper).clone());
        //Pointing to the dragImg class in dropHere and add new class.
        $("#dropHere .dragImg").addClass("item-" + counts[0]);
        $("#dropHere .img").addClass("imgSize-" + counts[0]);

        //Remove the current class (ui-draggable and dragImg)
        $("#dropHere .item-" + counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging").addClass('rotatable');

        /****** applying the config param ******/
        $('.rotatable').resizable().rotatable(rotateParams);
        //$(".rotatable").append(nw, ne, se);
        $(".small-table div[class*='ui-rotatable-handle-']").bind("mousedown", function(e) {
          /****** applying the config param ******/
          $('.rotatable').resizable().rotatable(rotateParams);
          $('.rotatable').rotatable("instance").startRotate(e);
        });

        $(".item-" + counts[0]).dblclick(function() {
          $(this).remove();
        });

        make_draggable($(".item-" + counts[0]));
        $(".imgSize-" + counts[0]).resizable(resizeOpts);
      }

    }
  });


  var zIndex = 0;

  function make_draggable(elements) {
    elements.draggable({
      containment: 'parent',
      start: function(e, ui) {
        ui.helper.css('z-index', ++zIndex);
      },
      stop: function(e, ui) {}
    });
  }

});

#outer-dropzone {
  height: 140px;
}

#inner-dropzone {
  height: 80px;
}

.dropzone {
  background-color: #ccc;
  border: dashed 4px transparent;
  border-radius: 4px;
  margin: 10px auto 30px;
  padding: 10px;
  width: 80%;
  transition: background-color 0.3s;
}

.drop-active {
  border-color: #aaa;
}

.drop-target {
  background-color: #29e;
  border-color: #fff;
  border-style: solid;
}

.drag-drop {
  display: inline-block;
  min-width: 40px;
  color: #fff;
  background-color: transparent;
  -webkit-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
  transition: background-color 0.3s;
}

.drag-drop.can-drop {}

.dragImg {
  width: 50px;
  height: 50px;
  cursor: move;
}

.small-table {
  width: 50px;
  height: 50px;
  cursor: move;
}

#dropHere {
  width: 400px;
  height: 400px;
  border: dotted 1px black;
  float: left;
}

.box {
  border: 2px solid black;
  width: 100px;
  height: 100px;
  background-color: green;
  margin: 27px;
  position: relative;
}

.ui-rotatable-handle {
  background: url("https://image.ibb.co/knL4iF/1497037929_rotate_right.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 25px;
  width: 25px;
  position: absolute;
  top: -10px;
  left: -10px;
}

.ui-rotatable-handle-sw {
  bottom: -27px;
  left: -27px;
}

.ui-rotatable-handle-nw {
  top: -27px;
  left: -27px;
}

.ui-rotatable-handle-se {
  bottom: -27px;
  right: -27px;
}

.ui-rotatable-handle-ne {
  top: -27px;
  right: -27px;
}

.small-table {
  background-image: url('https://image.ibb.co/gXCjiF/small_table.png');
  background-size: contain;
}

.dance-floor {
  background-image: url('https://image.ibb.co/gjHjiF/dance_floor.png');
  background-size: contain;
  width: 100px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.rotatable/1.1/jquery.ui.rotatable.min.js"></script>
<div class="container">

  <div class="dragImg small-table"></div>
  <div class="dragImg dance-floor"></div>

  <div id="dropHere"></div>

</div>

使用 rotatable class 停止元素在鼠标滚动时移动

Stop element moving on mouse scroll using rotatable class

javascript

jquery

droppable

draggable