jquery сортируемое событие при наведении на элемент catched - PullRequest
Новая
       9

jquery сортируемое событие при наведении на элемент catched

0 голосов
/ 27 августа 2018

давайте возьмем простой сортируемый например, ссылка показана в конце.

Если мы поймаем какой-либо из слайдов в списке, возможно ли, например, перейти к элементу console.log, который мы наведем, взяв их? Более подробно, если мы нажмем на Слайд 1, чтобы поместить их ниже Слайда 2, мы наведем Слайд 2 на Слайд 1, возможно ли выбрать слайд два в этом действии?

пример: 

var isScreenDrag = true;
$("#slide").sortable({
    placeholder: 'slide-placeholder',
    axis: "y",
    revert: 150,
    start: function(e, ui) {
        if (isScreenDrag) {
            isScreenDrag = false;
            $('body').one("mouseleave", function() {
                $('body').mouseup();
                isScreenDrag = true; //event occured, rebind
            });
        } else {
            isScreenDrag = false;
        }
        placeholderHeight = ui.item.outerHeight();
        ui.placeholder.height(placeholderHeight + 15);
        $('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);

    },
    change: function(event, ui) {

        ui.placeholder.stop().height(0).animate({
            height: ui.item.outerHeight() + 15
        }, 300);

        placeholderAnimatorHeight = parseInt($(".slide-placeholder-animator").attr("data-height"));

        $(".slide-placeholder-animator").stop().height(placeholderAnimatorHeight + 15).animate({
            height: 0
        }, 300, function() {
            $(this).remove();
            placeholderHeight = ui.item.outerHeight();
            $('<div class="slide-placeholder-animator" data-height="' + placeholderHeight + '"></div>').insertAfter(ui.placeholder);
        });

    },
    stop: function(e, ui) {

        $(".slide-placeholder-animator").remove();

    }
});
$(".DragHover").droppable({
    over: function(event, ui) {
        console.log('over');
    },
    out: function(event, ui) {
        console.log('out');
    }
});
body {
    padding: 20px;
}
#slide {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 300px;
}
.slide {
    padding: 15px;
    background-color: #2F2F2F;
    margin: 0 0 15px;
    text-align: center;
    color: #FFF;
    border: 2px solid #444;
}

.slide-placeholder {
	background: #DADADA;
	position: relative;
}
.slide-placeholder:after {
	content: " ";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 15px;
	background-color: #FFF;
}
.bottom, .upper{    
	height: 30px;
    text-align: center;
}
.container{width:300px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class="container">
	<div class="DragHover upper">Upper</div>
	<ul id="slide">
	  <li class="slide">Slide 1</li>
	  <li class="slide">Slide 2</li>
	  <li class="slide">Slide 3</li>
	  <li class="slide">Slide 4</li>
	  <li class="slide">Slide 5</li>
	</ul>
	<div class="DragHover bottom">Bottom</div>
</div>
...