Перемещение картинки мышью js

Question

Есть картинка не обернутая в див.

Также есть div1, он пустой. Есть div2, он тоже пустой. Есть div3, в нем есть еще одна картинка.

Хочу, чтобы по клику на картинку не находящуюся в диве она прилипала к курсору мыши. Чтобы затем поместить ее в любой ПУСТОЙ див, наведя на него мышь и кликнув второй раз.

А также нужно чтобы была возможность перемещать уже имеющиеся в дивах картинки в любой другой свободный див тем же способом.

То есть событие клик должно прилеплять картинку к курсору, чтобы затем мышь можно было просто навести на любой пустой див и переместить в него кликнув по нему.

Подскажите способ реализации.

Answer 1

Вариант с перетаскиванием элементов с зажатой клавишей мыши

Вариант с перетаскиванием элементов по клику:

$('.box').on('click', '.fill', function(e) {
  e.stopPropagation();
  if ($('.fill.hold').length > 0) {
    $('.fill.hold')
      .appendTo($(e.currentTarget).closest('.box'))
      .removeClass('hold')
      .css('position', 'static');
  }
  $(e.currentTarget).toggleClass('hold');
  $('.box').toggleClass('hover');
});
$('body').on('mousemove', function(e) {
  $('.fill.hold').css({
    "position": "absolute",
    "top": (e.pageY - 10) + "px",
    "left": (e.pageX + 10) + "px"
  });
});
$('body').on('click', '.box', function(e) {
  $('.fill.hold')
    .appendTo(e.currentTarget)
    .removeClass('hold')
    .css('position', 'static');
  $('.box').removeClass('hover');
});

html,
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: lightskyblue;
}

.box {
  display: inline-block;
  width: 160px;
  height: 160px;
  margin: 10px;
  background: aliceblue;
  border: solid 3px royalblue;
}

.fill {
  position: static;
  width: 150px;
  height: 150px;
  margin-top: 5px;
  margin-left: 5px;
  background-image: url('https://wdesk.ru/_ph/209/2/68767157.jpg');
}

.hold {
  border: solid 5px #ccc;
}

.hover:hover {
  background: lightskyblue;
  border-style: dashed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"><div class="fill"></div></div>

БЛОГ НА HUSL

Перемещение картинки мышью js

Ответы (1 шт):