Drag and Drop Owl Carousel

gistfile1.js

$.fn.outerHTML = function(s) {
    return s
        ? this.before(s).remove()
        : jQuery("<p>").append(this.eq(0).clone()).html();
};

$(function(){   
        $(".owl-carousel").owlCarousel({
            mouseDrag: false,
            touchDrag: false,
        });
    
        $('#owl > .owl-wrapper-outer > .owl-wrapper > .owl-item > .my-owl-item').droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            drop: function( event, ui ) {
                var drhtml = $(ui.draggable).html();
                var thtml = $(this).html();
                
                $(ui.draggable).html(thtml);
                $(this).html(drhtml);                
                
            }
        });

        $('#owl > .owl-wrapper-outer > .owl-wrapper > .owl-item > .my-owl-item' ).draggable({
            start: function( event, ui ) {console.log('dragging');},
            stop: function(event, ui) { console.log(event,ui); },
            helper : 'clone',
            containment: '#owl > .owl-wrapper-outer > .owl-wrapper'
        });
});

gistfile2.html

<div id="owl" class="owl-carousel">
    <div class="my-owl-item">
        <img src="http://lorempixel.com/200/150/abstract" alt="" />
    </div>
    <div class="my-owl-item">
        <img src="http://lorempixel.com/200/150/business" alt="" />
    </div>
    <div class="my-owl-item">
        <img src="http://lorempixel.com/200/150/cats" alt="" />
    </div>
    <div class="my-owl-item">
        <img src="http://lorempixel.com/200/150/city" alt="" />
    </div>
    <div class="my-owl-item">
        <img src="http://lorempixel.com/200/150/people" alt="" />
    </div>
</div>

gistfile3.css

.ui-state-hover { border: 1px solid red; }
#owl > .owl-wrapper-outer > .owl-wrapper > .owl-item > .my-owl-item > img { width: 100%; }