jQuery：タイルを2列に並べ替えます。localStorageに保存されているデフォルトの順序

debugcn 投稿 Dev

サリンダーシン

ある列から別の列にドラッグアンドドロップできる柔軟性を備えた2つの異なる列にアイテムを配置したいと思います。注文をlocalStorageに保存して、ページ読み込み時のレイアウトを維持します。

これは私がこれまでに持っているものです：

（多大な感謝を込めて）これが私のコードのベースです：http：//webdeveloperplus.com/jquery/collpasible-drag-drop-panels/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Drag Drop Panels - Web Developer Plus Demos</title>
<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js" ></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="print.css" />

<script type="text/javascript" >
$(function(){
    $(document).ready(function(){
        var data = JSON.parse(localStorage.getItem("order"));
        $.each(data, function(i, val) {
            var columnId = data[i]["columnId"];
            var itemorder = data[i]["itemorder"];
            var orderArray = itemorder.toString().split(',');
            var listArray = $('.column .dragbox');
            for (var i = 0; i < orderArray.length; i++) {
                $('.column').append(listArray[orderArray[i]-1]);
            }
        });
    });

    $('.dragbox').each(function(){
        $(this).hover(function(){
            $(this).find('h2').addClass('collapse');
        }, function(){
            $(this).find('h2').removeClass('collapse');
        })
        .find('h2').hover(function(){
            $(this).find('.configure').css('visibility', 'visible');
        }, function(){
            $(this).find('.configure').css('visibility', 'hidden');
        })
        .click(function(){
            $(this).siblings('.dragbox-content').toggle();
        })
        .end()
        .find('.configure').css('visibility', 'hidden');
    });
    $('.column').sortable({
        connectWith: '.column',
        handle: 'h2',
        cursor: 'move',
        placeholder: 'placeholder',
        forcePlaceholderSize: true,
        opacity: 0.4,
        stop: function(event, ui){
            $(ui.item).find('h2').click();
            var sortorder='';
            var dataSave = [];
            $('.column').each(function(){
                var columnId=$(this).attr('id');
                var itemorder=$(this).sortable('toArray');

                item = {
                    'columnId':columnId,
                    'itemorder':itemorder,
                };
                dataSave.push(item);
                localStorage.setItem("order", JSON.stringify(dataSave));
            });
        }
    })
    .disableSelection();
});
</script>
</head>
<body>
<h3>Drag n Drop Panels</h3>
<div class="column" id="column1">
    <div class="dragbox" id="1" >
        <h2>Handle 1</h2>
        <div class="dragbox-content" > This is a panel. </div>
    </div>
    <div class="dragbox" id="2" >
        <h2>Handle 2</h2>
        <div class="dragbox-content" > This is a panel. </div>
    </div>
    <div class="dragbox" id="3" >
        <h2>Handle 3</h2>
        <div class="dragbox-content" > This is a panel. </div>
    </div>
</div>
<div class="column" id="column2" >
    <div class="dragbox" id="4" >
        <h2>Handle 4</h2>
        <div class="dragbox-content" > This is a panel. </div>
    </div>
    <div class="dragbox" id="5" >
        <h2>Handle 5</h2>
        <div class="dragbox-content" > This is a panel. </div>
    </div>
    <div class="dragbox" id="6" >
        <h2>Handle 6</h2>
        <div class="dragbox-content" > This is a panel. </div>
    </div>
</div>
</body>
</html>

Souleste

jQuery UIの並べ替え可能なポートレットを調べます：https：//jqueryui.com/sortable/#portlets

このようにして、パネルをドロップするデフォルトの領域があります。

$(function() {
  $(".column").sortable({
    connectWith: ".column",
    handle: ".portlet-header",
    cancel: ".portlet-toggle",
    placeholder: "portlet-placeholder ui-corner-all"
  });

  $(".portlet")
    .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
    .find(".portlet-header")
    .addClass("ui-widget-header ui-corner-all")
    .prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");

  $(".portlet-toggle").on("click", function() {
    var icon = $(this);
    icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
    icon.closest(".portlet").find(".portlet-content").toggle();
  });
});

body {
  min-width: 520px;
}

.column {
  width: 170px;
  float: left;
  padding-bottom: 100px;
}

.portlet {
  margin: 0 1em 1em 0;
  padding: 0.3em;
}

.portlet-header {
  padding: 0.2em 0.3em;
  margin-bottom: 0.5em;
  position: relative;
}

.portlet-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -8px;
}

.portlet-content {
  padding: 0.4em;
}

.portlet-placeholder {
  border: 1px dotted black;
  margin: 0 1em 1em 0;
  height: 50px;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<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>
<div class="column">

  <div class="portlet">
    <div class="portlet-header">Feeds</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

  <div class="portlet">
    <div class="portlet-header">News</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

</div>

<div class="column">

  <div class="portlet">
    <div class="portlet-header">Shopping</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

</div>

<div class="column">

  <div class="portlet">
    <div class="portlet-header">Links</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

  <div class="portlet">
    <div class="portlet-header">Images</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

</div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]