Jquery：无法在 Jquery UI 可排序和 owl 轮播之间动态切换

Question

我正在尝试在 owl 轮播和 jquery UI 可排序（网格类型）之间切换 div。 尝试从旋转木马切换到可排序模式时出现问题。

<div  class="grid">
    <div id="i_1">A</div>
    <div id="i_2">B</div>
    <div id="i_3">C</div>
    <div id="i_4">D</div>           
</div>

<div><button  id="enable-owl">owl</button></div>
<div><button  id="enable-sortable">sortable</button></div> 

javascript:

 $(document).ready(function() {

 $(".grid").sortable({
            tolerance: 'pointer',
            revert: 400,
            placeholder: 'placeholder tile',
            forceHelperSize: true,            
      });
 $( "#enable-owl" ).button().on( "click", function() {

                  $( ".grid" ).sortable( "disable" );
                 $(".grid").toggleClass("dyna-owl");
                   $(".dyna-owl").owlCarousel();
                });
 $( "#enable-sortable" ).button().on( "click", function(){           

                  $( ".grid" ).sortable( "enable" );
                 $(".grid").toggleClass("dyna-owl");                     

                });


}); 

jsfiddle:http://jsfiddle.net/jackhammer94/w6vhu163/1/

Answer 1

如果你想让它们正常工作，你需要 distroy 它们而不仅仅是 disable 它们，因为样式和额外的元素是创建干扰其他插件的功能。

$(document).ready(function () {

    var sort_options = {                        // save this for later use
        tolerance: 'pointer',
        revert: 400,
        placeholder: 'placeholder tile',
        forceHelperSize: true,
    };

    $(".grid").sortable(sort_options);         // use the options 

    $("#enable-owl").button().on("click", function () {

        $(".grid").sortable("destroy");       // destroy sortable
        $(".grid").toggleClass("dyna-owl");
        $(".dyna-owl").owlCarousel();         // enable owlCarousel

    });


    $("#enable-sortable").button().on("click", function () {

        $('.dyna-owl').data('owlCarousel').destroy();    // destroy owlCarousel
        $(".grid").toggleClass("dyna-owl");
        $(".grid").sortable(sort_options);    // enable sortable with the options

    });

});

FIDDLE