Swipe Items

Attempting to swipe boxes back and forth.

by someyoungideas

HTML

<script src="https://raw.github.com/mattbryson/TouchSwipe-Jquery-Plugin/master/jquery.touchSwipe.js"></script>
        <div id="box1">
            <ul id="list1">
                <li class="items">Item1</li>
                <li class="items">Item2</li>
                <li class="items">Item3</li>
                <li class="items">Item4</li>
            </ul>
        </div>
        
        <div id="box2">
            <ul id="list2">
            </ul>
        </div>
    
    </div>

CSS

#box1 {
    float: left;
    margin:50px 50px 0 0;
    padding: 0;
    width: 300px;
    height: 300px;
    background: #66FF66;
}

#list1 ul {
    list-style:none;
    margin: 0;
    padding: 0;
}

.items {
    margin: 0 0 4px 0;
    padding: 12px;
    border:1px solid #FFF;
}

#box2 {
    
    float: left;
    margin:50px 0 0 0;
    padding: 0;
    width: 300px;
    height: 300px;
    background:#CC66FF;
}

#list2 {
    margin: 0;
    padding: 0;
    width: 300px;
height: 300px;
}

JavaScript

$(function() {
    $(".items").swipe({
        swipeRight: function(event) {
            $(this).appendTo("#list2");
        },
        swipeLeft: function(event) {
            $(this).appendTo("#list1");
        }
    });
});