Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.06.2018, 22:33
Кандидат Javascript-наук
Отправить личное сообщение для Castromen Посмотреть профиль Найти все сообщения от Castromen
 
Регистрация: 04.02.2015
Сообщений: 116

Dropppable + Sortable Juqery UI
Добрый день, сижу голову ломаю как прекрутить к этой истории(https://jqueryui.com/droppable/#photo-manager) перестановку что бы можно было изменять порядок внутри корзины (trash)
https://jsfiddle.net/xpvt214o/225581/
Буду очень признателен если поможете.
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 13.06.2018, 23:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Castromen,
положили $item в корзину, отключили Dropppable, вынули включили.
создали $list установили sortable, положили $item в корзину, обновили $list sortable, всё.
Ответить с цитированием
  #3 (permalink)  
Старый 13.06.2018, 23:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dropppable sortable trash
Сообщение от рони
положили $item в корзину, отключили Dropppable(101), вынули включили.(119)
создали $list установили sortable(103), положили $item в корзину, обновили $list sortable(113), всё.
<!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>
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
jQuery DOM Sortable, Droppable и Draggable Infinity178 jQuery 5 26.12.2016 18:28
Div с overflow-y: scroll, jquery ui droppable и sortable yevgeniyche jQuery 1 29.09.2014 08:08
Не сохраняются настройки grid Fubu_By ExtJS 1 09.07.2013 21:49
jquery ui sortable + draggable giGnet jQuery 1 08.03.2011 19:37
ui draggable + sortable satels jQuery 0 05.01.2010 11:28