Dropppable + Sortable Juqery UI
Добрый день, сижу голову ломаю как прекрутить к этой истории(https://jqueryui.com/droppable/#photo-manager) перестановку что бы можно было изменять порядок внутри корзины (trash)
https://jsfiddle.net/xpvt214o/225581/ Буду очень признателен если поможете. Спасибо. |
Castromen,
положили $item в корзину, отключили Dropppable, вынули включили. создали $list установили sortable, положили $item в корзину, обновили $list sortable, всё. |
dropppable sortable trash
Цитата:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Droppable - Simple photo manager</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <style> #gallery { float: left; width: 65%; min-height: 12em; } .gallery.custom-state-active { background: #eee; } .gallery li { float: left; width: 96px; padding: .4em; margin: 0 .4em .4em 0; text-align: center; } .gallery li h5 { margin: 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 { float: right; width: 32%; min-height: 18em; padding: 1%; } #trash h4 { line-height: 16px; margin: 0 0 .4em; } #trash h4 .ui-icon { float: left; } #trash .gallery h5 { display: none; } </style> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> $(function() { var $gallery = $("#gallery"), $trash = $("#trash"); $("li", $gallery).draggable({ cancel: "a.ui-icon", revert: "invalid", containment: "document", helper: "clone", cursor: "move" }); $trash.droppable({ accept: "#gallery > li", classes: { "ui-droppable-active": "ui-state-highlight" }, drop: function(event, ui) { deleteImage(ui.draggable) } }); $gallery.droppable({ accept: "#trash li", classes: { "ui-droppable-active": "custom-state-active" }, drop: function(event, ui) { recycleImage(ui.draggable) } }); 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 deleteImage($item) { $item.draggable("disable").fadeOut(function() { var $list = $("ul", $trash).length ? $("ul", $trash) : $("<ul class='gallery ui-helper-reset'/>").sortable({ items: "> li" }).appendTo($trash); $item.find("a.ui-icon-trash").remove(); $item.append(recycle_icon).appendTo($list).fadeIn(function() { $item.animate({ width: "48px" }).find("img").animate({ height: "36px" }) }); $list.sortable("refresh") }) } 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.draggable("enable").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() }) } function viewLargerImage($link) { var src = $link.attr("href"), title = $link.siblings("img").attr("alt"), $modal = $("img[src$='" + src + "']"); if ($modal.length) $modal.dialog("open"); else { var img = $("<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />").attr("src", src).appendTo("body"); setTimeout(function() { img.dialog({ title: title, width: 400, modal: true }) }, 1) } } $("ul.gallery > li").on("click", function(event) { var $item = $(this), $target = $(event.target); if ($target.is("a.ui-icon-trash")) deleteImage($item); else if ($target.is("a.ui-icon-zoomin")) viewLargerImage($target); else if ($target.is("a.ui-icon-refresh")) recycleImage($item); return false }) }); </script> </head> <body> <div class="ui-widget ui-helper-clearfix"> <ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix"> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras</h5><img src="https://jqueryui.com/resources/demos/droppable/images/high_tatras_min.jpg" alt= "The peaks of High Tatras" width="96" height="72"> <a href="images/high_tatras.jpg" title= "View larger image" class="ui-icon ui-icon-zoomin">View larger</a> <a href= "https://jqueryui.com/resources/demos/droppable/link/to/trash/script/when/we/have/js/off" title="Delete this image" class= "ui-icon ui-icon-trash">Delete image</a> </li> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras 2</h5><img src="https://jqueryui.com/resources/demos/droppable/images/high_tatras2_min.jpg" alt= "The chalet at the Green mountain lake" width="96" height="72"> <a href= "https://jqueryui.com/resources/demos/droppable/images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a> <a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a> </li> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras 3</h5><img src="https://jqueryui.com/resources/demos/droppable/images/high_tatras3_min.jpg" alt= "Planning the ascent" width="96" height="72"> <a href="https://jqueryui.com/resources/demos/droppable/images/high_tatras3.jpg" title= "View larger image" class="ui-icon ui-icon-zoomin">View larger</a> <a href= "link/to/trash/script/when/we/have/js/off" title="Delete this image" class= "ui-icon ui-icon-trash">Delete image</a> </li> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras 4</h5><img src="https://jqueryui.com/resources/demos/droppable/images/high_tatras4_min.jpg" alt= "On top of Kozi kopka" width="96" height="72"> <a href="https://jqueryui.com/resources/demos/droppable/images/high_tatras4.jpg" title= "View larger image" class="ui-icon ui-icon-zoomin">View larger</a> <a href= "link/to/trash/script/when/we/have/js/off" title="Delete this image" class= "ui-icon ui-icon-trash">Delete image</a> </li> </ul> <div id="trash" class="ui-widget-content ui-state-default"> <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4> </div> </div> </body> </html> |
Часовой пояс GMT +3, время: 19:46. |