使用可旋轉類移動鼠標滾動的停止元素

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>