<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Simple photo manager</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#gallery { width: 400px; min-height: 250px; background-color:yellow;}
.gallery.custom-state-active { background: #eee; }
.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
.gallery li a { float: right; }
.gallery li a.ui-icon-zoomin { float: left; }
.gallery li img { width: 100%; cursor: move; }
#trash { width: 400px; min-height: 18em; padding: 1%; }
#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
#trash h4 .ui-icon { float: left; }
#trash .gallery h5 { display: none; }
</style>
<script>
$(function() {
// there's the gallery and the trash
var $gallery = $( "#gallery" ),
$trash = $( "#trash" );
// let the gallery items be draggable
$( "li", $gallery ).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});
// let the gallery items be draggable
$( "li", $trash ).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});
// let the trash be droppable, accepting the gallery items
$trash.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
item_to_sklad( ui.draggable );
}
});
// let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
accept: "#trash li",
activeClass: "custom-state-active",
drop: function( event, ui ) {
recycleImage( ui.draggable );
}
});
// image deletion function
// функция, которая появляется при перемещении из инвентаря на склад
var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
function item_to_sklad( $item ) {
$.ajax({
type: 'POST',
url: 'mod_z/test6_r.php?action=sample2',
data: 'id_group='+$item.attr('id').replace('inventory',''), //получаем ID элемента (группа предмета)
success: function(data){
$('.results').html(data);
var obj = eval(data);
//alert(obj.id_group_sklad); //Группа склада, в которую будет помещен ресурс.
//alert(obj.id_group_inventory_act); //Кол-во отнимаемых единиц предмета с группы инвентаря. Если 0- то удаляем группу инвенторя
//alert(obj.id_group_inventory); //Группа инвентаря, с которой забираем ресурс.
//alert(obj.id_group_sklad_act); //Кол-во единиц товара в данной группе на складе
//alert(obj.id_group_sklad_status); //Если =0 - то группы нет и предмет создается в новой группе; 1- группа есть
if (obj.type==1) //РЕСУРС
{
if (obj.id_group_sklad_status==0)
{
//создаем на складе новую группу и добавляем в нее кол-во единиц товара, равное obj.id_group_sklad_act
var $list = $( "ul", $trash ).length ?
$( "ul", $trash ) :
$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash ); //перемещает элемент на склад
$list.append($item.clone(true)).find( '#inventory'+$item.attr('id').replace('inventory','') ).attr('id','sklad'+obj.id_group_sklad).find('#id_rr').html(obj.id_group_sklad_act);;
} else
{
//обновляем группу склада obj.id_group_sklad (обновляем кол-во предметов в группе склада )
$('#sklad'+obj.id_group_sklad).find( '#id_rr' ).html(obj.id_group_sklad_act);
};
if (obj.id_group_inventory_act==0)
{
//удаляем групу элементов инвентаря
$item.fadeOut(); //скрывает элемент массива и его содержимое
$item.remove(); //Удаляет элемент массива и его содержимое
} else
{
//обновляем группу инвентаря (обновляем кол-во предметов в группе)
$('#inventory'+obj.id_group_inventory).find( '#id_rr' ).html(obj.id_group_inventory_act);
//$item.find( '#id_rr' ).html(obj.id_group_inventory_act);
};
}
}
});
}
// image recycle function
//функция, которая перемещает из склада в инвентарь
var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
function recycleImage( $item ) {
$item.fadeOut(function() {
$item
.find( "a.ui-icon-refresh" )
.remove()
.end()
.css( "width", "96px")
.append( trash_icon )
.find( "img" )
.css( "height", "72px" )
.end()
.appendTo( $gallery )
.fadeIn();
});
}
// resolve the icons behavior with event delegation
$( "ul.gallery > li" ).click(function( event ) {
var $item = $( this ),
$target = $( event.target );
if ( $target.is( "a.ui-icon-trash" ) ) {
item_to_sklad( $item );
} else if ( $target.is( "a.ui-icon-refresh" ) ) {
recycleImage( $item );
}
return false;
});
});
</script>
</head>
<body>
<div> <h3>ИНВЕНТАРЬ </h3> </div>
<div class="ui-widget ui-helper-clearfix">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150px">рисунок</td>
<td width="auto">
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<?php
$sql2 = $db->q("SELECT * FROM `inventory` WHERE `id_personage`='".$_SESSION['id_person_d']."'"); //предметы в инвентаре
while($post2 = mysql_fetch_array($sql2))
{
echo "<li id=inventory".$post2['id_group']." class='ui-widget-content ui-corner-tr'>";
echo "<h5 class='ui-widget-header'>High Tatras</h5>";
echo "<img src='images/high_tatras_min.jpg' alt='The peaks of High Tatras' width='96' height='72' />";
echo "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
if ($post2['type']==1) {echo "<div id='id_rr'>".$post2['count_item_group']."</div>";}
echo "</li>";
}
?>
</ul>
</td>
</tr>
</table>
<div> <h3>СКЛАД </h3> </div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="150px">рисунок</td>
<td width="auto" align="center">
<div id="trash" class="ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span>Склад</h4>
<ul id="trash" class="gallery ui-helper-reset">
<?php
$sql2 = $db->q("SELECT * FROM `sklad` WHERE `id_personage`='".$_SESSION['id_person_d']."'"); //предметы в инвентаре
while($post2 = mysql_fetch_array($sql2))
{
echo "<li id=sklad".$post2['id_group']." class='ui-widget-content ui-corner-tr ui-draggable'>";
echo "<h5 class='ui-widget-header'>High Tatras</h5>";
echo "<img src='images/high_tatras_min.jpg' alt='The peaks of High Tatras' width='96' height='72' />";
echo "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
if ($post2['type']==1) {echo "<div id='id_rr'>".$post2['count_item_group']."</div>";}
echo "</li>";
}
?>
</ul>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
