使用可旋转类移动鼠标滚动的停止元素

Question

我目前正在使用拖放式Web应用程序，因此用户可以计划选取框布局。

部分功能是用户可以在画布上旋转某些家具。但是，当鼠标指针位于可旋转元素上时，滚动似乎也会旋转该元素，这会导致问题，特别是如果用户已完美布局，然后向下滚动页面以填充表单 - 可能会弄乱布局。

该应用程序使用jQuery中的可旋转类，并实现可拖动和可拖拽的类。

这是我的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格），然后保持在那里，除非它是双点击克隆。我想知道，如果用户在其上滚动鼠标，是否有任何方法来停止旋转的元素？

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

Answer 1

请注意，您才可以通过传递参数和目标配置你旋转，这些参数之一是whihch默认设置为true wheelRotate，所以你”刚才已经创建一个对象contating这个PARAM假值：var rotateParams = {wheelRotate:false};然后过时的对象，如下图所示旋转（）fanction：

$('.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>