Élément d'arrêt se déplaçant sur le défilement de la souris à l'aide de la classe rotative

Question

Je travaille actuellement sur une application Web de type drag-drop, sur laquelle les utilisateurs peuvent planifier une disposition de sélection.

Une partie de la fonctionnalité est que les utilisateurs peuvent faire pivoter certains meubles sur la toile. Cependant, il semble que le fait de faire défiler le pointeur de la souris sur un élément rotatif fera également pivoter cet élément, ce qui pose des problèmes, surtout si l'utilisateur a parfaitement mis en forme et défile la page pour remplir un formulaire. disposition. L'application utilise la classe rotative de jQuery et implémente les classes draggable et droppable.

Ceci est mon 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) {} 
    }); 
    } 
}); 

Comme vous pouvez le voir, chaque élément qui est déplacé est cloné une fois qu'il est tombé sur la zone de saut (#dropHere div) et reste alors là-bas à moins qu'elle soit double-cliqué. Je veux savoir, est-il possible d'arrêter la rotation de l'élément si l'utilisateur fait défiler la souris dessus?

EDIT: Voici une FIDDLE de l'application:

Answer 1

Notez que vous ne pouvez vous configurer en rotation en passant des paramètres au fur et objet, l'un de ces paramètres est la wheelRotate whihch définie sur true par défaut, de sorte que vous » ve juste pour créer un objet contating cette fausse valeur avec param: var rotateParams = {wheelRotate:false}; puis passe l'objet dans le fanction rotatif() comme ci-dessous:

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

S'il vous plaît voir extrait ci-dessous travail: // adds a commenté

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