Draggable Listview with touch and dropzone
HTML
<script src="https://raw.github.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.js"></script>
<div id="mypage">
<form id="target" action="#" method="post">
<div data-role="fieldcontain">
<label for="title">Title:</label>
<input type="text" name="title" id="title" placeholder="diashow title" value="" />
</div>
</form>
<ul id="items" data-role="listview">
<li class="list">
<img src="http://lorempixel.com/80/80/animals/1" />some test</li>
<li class="list">
<img src="http://lorempixel.com/80/80/animals/4" />
</li>
</ul>
</div>
<div style="float:left;margin-left:100px;">
<div class="squaredotted">Drop here</div>
<div id="info">sss</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;
}
JavaScript
$(function() {
$("#items").sortable({
start: function(event, ui) {
ui.item.toggleClass("highlight");
},
stop: function(event, ui) {
ui.item.toggleClass("highlight");
}
});
$("#items").disableSelection();
$("#items").draggable();
});
$('#target').submit(function() {
// alert('Handler for .submit() called.');
$('#mypage ul').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;
});
$(".squaredotted").droppable({
drop: function(event, ui) {
$("#info").html("dropped!");
$(event.target).css('background-color', 'green').animate({
backgroundColor: 'lightgray'
}, 'slow'); //doesnt understand lightgray *facepalm*
},
over: function(event, ui) {
$("#info").html("moving in!");
$(event.target).css('background-color', 'red');
},
out: function(event, ui) {
$("#info").html("moving out!");
$(event.target).css('background-color', 'lightgray');
}
});