Перетащите изображение из скользящего слайдера js - PullRequest
Новая
       16

Перетащите изображение из скользящего слайдера js

0 голосов
/ 13 апреля 2020

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

Вот мой пример код:

HTML: 

<div class='container'>
  <div class='single-item'>
    <div class="product"><h3>1</h3></div>
    <div class="product"><h3>2</h3></div>
    <div class="product"><h3>3</h3></div>
    <div class="product"><h3>4</h3></div>
    <div class="product"><h3>5</h3></div>
  </div>
</div>

CSS: 

.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
}

div{
  margin: 5px;
}
.product {
    cursor: move;
    z-index: 1;
}
.product img {
  width: 100%;
}
.dragged {
    z-index: 2;
}

JS: 

$(".single-item").slick({
  dots: true,
  slidesToShow: 3,
  slidesToScroll: 1
});

$('.product').on('mousedown', function (e) {

    var $this = $(this);

    $this.addClass('dragged');

    var oTop = e.pageY - $('.dragged').offset().top;
    var oLeft = e.pageX - $('.dragged').offset().left;

    $(this).parents().on('mousemove', function (e) {

        $('.dragged').offset({

            top: e.pageY - oTop,
            left: e.pageX - oLeft

        })

    });

    $('body').on('mouseup', function () {

        $this.removeClass('dragged');
        $('body').unbind('mouseup');

    });

    return false;    
});
$(".slider").on("slide mouseenter mousedown",function(event){
    event.stopPropagation();
});

https://jsfiddle.net/dandndlndn/df6hvbm9/6/ Спасибо.

...