Question

我正在尝试在Slick轮播单个项目中实现jQuery UI Draggable / Droppable。但我无法让它在相互结合方面发挥作用。

我从Reference link获得了参考，但没有使用我的案例。

var slick = $('.stack').slick({
    centerMode: true,
    centerPadding: '80px',
    arrows: false,
    variableWidth: true,
    dots: true,
    swipeToSlide: true,
    focusOnSelect: true
});

    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });

$("#droppable").on("slide mouseenter mousedown",function(event){
    event.stopPropagation();
});

Answer 1

添加这一行： $( '*[draggable!=true]', '.slick-track' ).unbind( 'dragstart' );

var slick = $( '.stack' ).slick( {
    centerMode: true,
    centerPadding: '80px',
    arrows: false,
    variableWidth: true,
    dots: true,
    swipeToSlide: true,
    focusOnSelect: true
} );

$( '#draggable' ).draggable();
$( '#droppable' ).droppable( {
    drop: function( event, ui ) {
        $( this ).addClass( 'ui-state-highlight' ).find( 'p' ).html( 'Dropped!' );
    }
} );

$( '*[draggable!=true]', '.slick-track' ).unbind( 'dragstart' );
$( '#droppable' ).on('slide mouseenter mousedown', function( event ) {
    event.stopPropagation();
} );

带有Slick轮播的jQuery UI Draggable / Droppable

1 个答案: