Clever Geek Handbook

Stop element moving with mouse using a spinning class

I am currently working on a drag and drop web application, after which users can plan the layout.

Part of the functionality is that users can rotate certain pieces of furniture on the canvas. However, it seems that scrolling while the mouse is over the rotating element will also rotate that element, which causes problems especially if the user has their own layout and then scrolls the page to fill out the form - possibly messing up the layout.

The app uses a spinning class from jQuery and implements drag and drop and droppable classes.

This is my 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) {}
    });
  }
});

As you can see, every element that is dragged is cloned after dropping it to the dropzone ( #dropHere

div) and then stays there unless double-clicked. I want to know if there is a way to stop the rotation of an element if the user scrolls his mouse over it?

EDIT: FIDDLE applications:

+3


source to share


1 answer


Note that you can simply adjust the rotation by passing the as and object parameters, one of those parameters is wheelRotate

whihch, which is set to true by default, so you should just create an object containing this parameter with a false value: var rotateParams = {wheelRotate:false};

and then loop the object in the rotating ( ) fan as shown below:

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


See below snippet: // add 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>
Run codeHide result


+1


source






More articles:


All Articles