Two Listviews

by dirkk0

HTML

<script src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.js"></script>
<div id="mypage">
    <div class="ui-block-a">
        <form id="target_technics" action="#" method="post">
            <div data-role="fieldcontain">
                <!-- label for="title">Title:</label -->
                <input type="text" name="title" id="title" placeholder="new technics" value="" />
            </div>
        </form>
        <ul id="items_technics" data-role="listview">
            <li class="list dropzone"><a href="#">
                    <img src="http://lorempixel.com/80/80/technics/1" />iPad</a>

            </li>
            <li class="list">
                <img src="http://lorempixel.com/80/80/technics/3" />Laptop</li>
        </ul>
    </div>
    <div class="ui-block-b">
        <form id="target_animals" action="#" method="post">
            <div data-role="fieldcontain">
                <input type="text" name="title" id="title" placeholder="new animal" value="" />
            </div>
        </form>
        <ul id="items_animals" data-role="listview">
            <li class="list">
                <img src="http://lorempixel.com/80/80/animals/1" />Elefant</li>
            <li class="list">
                <img src="http://lorempixel.com/80/80/animals/4" />Giraffe</li>
        </ul>
    </div>
    <div class="ui-block-b">
        <div id="info">sss</div>
    </div>
</div>

CSS

.squaredotted {
    width:200px;
    height:200px;
    border:1px dotted gray;
    margin-bottom:5px;
    margin-left:5px;
    text-align:center;
    line-height:50px;
    float:left;
    background-color:lightgray;
}
/* Start with core styles outside of a media query that apply to mobile and up */

/* Global typography and design elements, stacked containers */
 body {
    font-family: Helvetica, san-serif;
}
H1 {
    color: green;
}
a:link {
    color:purple;
}
/* Stack the two content containers */
 .main, .sidebar {
    display:block;
    width:100%;
}
/* First breakpoint at 576px */

/* Inherits mobile styles, but floats containers to make columns */
 @media all and (min-width: 36em) {
    .main {
        float: left;
        width:60%;
    }
    .sidebar {
        float: left;
        width:40%;
    }
}
/* Second breakpoint at 800px */

/* Adjusts column proportions, tweak base H1 */
 @media all and (min-width: 50em) {
    .main {
        width:70%;
    }
    .sidebar {
        width:30%;
    }
    /* You can also tweak any other styles in a breakpoint */
    H1 {
        color: blue;
        font-size:1.2em
    }
}
/* stack all grids below 40em (640px) */
 @media all and (max-width: 35em) {
    .my-breakpoint .ui-block-a, .my-breakpoint .ui-block-b, .my-breakpoint .ui-block-c, .my-breakpoint .ui-block-d, .my-breakpoint .ui-block-e {
        width: 100%;
        float:none;
    }
}
.

JavaScript

$(function () {
    $("#items_animals").sortable({
        start: function (event, ui) {
            ui.item.toggleClass("highlight");
        },
        stop: function (event, ui) {
            ui.item.toggleClass("highlight");
        }
    });
    $("#items_animals").disableSelection();
    $("#items_animals").draggable();

    $("#items_technics").sortable();

});


$('#target_animals').submit(function () {
    $('#items_animals').prepend($("<li>", {
        class: 'list ui-li ui-li-static ui-btn-up-c ui-li-has-thumb',
        html: $("<img>", {
            src: 'http://lorempixel.com/80/80/animals',
            class: 'ui-li-thumb'
        })
    }).append($("input:first").val()).hide().fadeIn(200));
    $("input:first").val('');
    return false;
});


$('#target_technics').submit(function () {
    $('#items_technics').prepend($("<li>", {
        class: 'list ui-li ui-li-static ui-btn-up-c ui-li-has-thumb',
        html: $("<img>", {
            src: 'http://lorempixel.com/80/80/technics',
            class: 'ui-li-thumb'
        })
    }).append($("input:first").val()).hide().fadeIn(200));
    $("input:first").val('');
    return false;
});


$(".dropzone").droppable({
    drop: function (event, ui) {
        console.log(event.target)
        $("#info").html("dropped!");
        $(event.target).css('background-color', 'green').animate({
            backgroundColor: 'black'
        }, 'slow'); //doesnt understand lightgray *facepalm*
    },
    over: function (event, ui) {
        $("#info").html("moving in!");
        $(event.target).css('font-weight', 'normal');
    },
    out: function (event, ui) {
        $("#info").html("moving out!");
        $(event.target).css('background-color', 'lightgray');
    }
});


$(function () {
    $('#items_animals').prepend($("<li>", {
        class: 'list ui-li ui-li-static ui-btn-up-c ui-li-has-thumb',
        html: $("<img>", {
            src: 'http://lorempixel.com/80/80/animals',
            class: 'ui-li-thumb'
 ...