Как повернуть блок div при перетаскивании элемента с помощью jquery - PullRequest
Новая
       6

Как повернуть блок div при перетаскивании элемента с помощью jquery

0 голосов
/ 08 ноября 2019

Я понимаю, что нам нужно использовать transform: rotate(ndeg); для поворота определенного элемента в CSS. В этом случае я хочу сделать это динамически. Используя jQuery, я хочу повернуть блок box / container, когда пользователь перетаскивает маркер (красный фон) на n градусовпо желанию пользователя. Возможно ли это в jQuery? 

body {
  padding: 50px;
}

.box_element {
  border: 1px solid black;
  width: 200px;
  height: 200px;
  position: relative;
  z-index: -1;
}

.handle {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 10px;
  height: 10px;
  border: 1px solid;
  background: red;
  z-index: 10;
}
<body>
  <div class="box_element">
    THIS IS TEST
    <div class="handle"></div>
  </div>
</body>

Ответы [ 2 ]

2 голосов
/ 08 ноября 2019

Вы можете использовать css-variable и затем изменять значение переменной при нажатии. 

const box_element = document.getElementById('box_element');
const handle = document.getElementById('handle');

handle.addEventListener('click', function() {
  let currentVal = getComputedStyle(box_element).getPropertyValue('--rotate_deg');

  box_element.style.setProperty(
    '--rotate_deg', ((parseInt(currentVal.replace('deg', '')) + 90) % 360) + 'deg');

});
:root {
  --rotate_deg: 0deg;
}

.box_element {
  margin: 1em;
  border: 1px solid black;
  width: 100px;
  height: 100px;
  position: relative;
  z-index: -1;
  transform: rotate(var(--rotate_deg))
}

.handle {
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 10px;
  height: 10px;
  border: 1px solid;
  background: red;
  z-index: 10;
  cursor: pointer;
}
<div class="box_element" id="box_element">
  THIS IS TEST
  <div class="handle" id="handle"></div>
</div>
1 голос
/ 08 ноября 2019

Здесь вам нужно написать немного кода, чтобы сделать это возможным, попробуйте живой код https://codepen.io/libin-prasanth/pen/xxxzbLg

var stop,
  active = false,
  angle = 0,
  rotation = 0,
  startAngle = 0,
  center = {
    x: 0,
    y: 0
  },
  R2D = 180 / Math.PI;

function start(e) {
  e.preventDefault();
  var bb = this.getBoundingClientRect(),
    t = bb.top,
    l = bb.left,
    h = bb.height,
    w = bb.width,
    x,
    y;
  center = {
    x: l + w / 2,
    y: t + h / 2
  };
  x = e.clientX - center.x;
  y = e.clientY - center.y;
  startAngle = R2D * Math.atan2(y, x);
  return (active = true);
}

function rotate(e) {
  e.preventDefault();
  var x = e.clientX - center.x,
    y = e.clientY - center.y,
    d = R2D * Math.atan2(y, x);
  rotation = d - startAngle;
  return (rot.style.webkitTransform = "rotate(" + (angle + rotation) + "deg)");
}

function stop() {
  angle += rotation;
  return (active = false);
}

rot = document.getElementById("draggable");
rot.addEventListener("mousedown", start, false);
window.addEventListener("mousemove", function(event) {
  if (active === true) {
    event.preventDefault();
    rotate(event);
  }
});
window.addEventListener("mouseup", function(event) {
  event.preventDefault();
  stop(event);
});
  
#draggable { 
  left: 50px;
  top: 50px;
  width: 100px;
  height: 100px; 
	position: relative;
	border: 1px solid #000;
} 
#draggable:before{
  content: "";
	position: absolute;
	bottom: -5px;
	right: -5px;
	width: 10px;
	height: 10px;
	background: #f00;
}
<div id="draggable"> 
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...