代码之家 › 专栏 › 技术社区 › user8512043

更改拖放插件的布局设计

jquery javascript

user8512043 · 技术社区 · 4 年前

我尝试使用拖放功能 jQuery 并发现下面的是一个有用的。下面是它的工作原理:

 $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();

#sortable1, #sortable2 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  #sortable1 li, #sortable2 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }

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

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
 
<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

非常基本,只需要从一个列表拖放到另一个列表。现在我想做的是:

Box 1   Item 1
Box 2   Item 2
Box 3   Item 3
Box 4   Item 4

左边是四个空盒子,右边是物品。因此,当我将一个项目从右向左拖动时,它应该适合任何一个框,并且以同样的方式,它可以被拖动回右侧部分。我希望它可以在插件中完成,并结束类似的事情,尽管它会创建空框,但无法将它们放入空框中:(空框的数量将等于没有项目)

 $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
 }).disableSelection();

#排序1,#排序2{
边框:1px实心#eee;
宽度:142px;
最小高度:20px;
列表样式类型:无;
保证金:0;
填充:5px0;
浮动:左;
右边距:10px;
}
#可排序1 li,#可排序2 li{
保证金:0 5px 5px 5px;
填充物:5px;
字体大小:1.2米;
宽度:120px;
}

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

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default"></li>
  <li class="ui-state-default"></li>
  <li class="ui-state-default"></li>
  <li class="ui-state-default"></li>
  <li class="ui-state-default"></li>
</ul>
 
<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>

有没有可能让它与 jQuery 插件?

0 回复 | 直到 4 年前

Dharman TechyTech 4 年前

恐怕jQueryUI的sortable不适合完成这项任务。一个更好的选择是利用两者 Draggable 和 Droppable jQueryUI小部件。

我正在附加一个工作代码片段。你必须改进行为,调整风格,放一些真正的内容(现在是随机内容)。

如果您需要使面板项也可排序,这也是可以实现的,尽管这需要更多的代码。

/* global $ */

$(function () {
  var $mainSection = $('#main');
  var $leftPanelTargets = $('#left-panel > .item-container');
  var $rightPanelTargets = $('#right-panel > .item-container');

  // Populate the leftPanel with sample items
  $leftPanelTargets.each(function addItem(i, container) {
    const $item = $('<div class="drag-item"></div>');
    $item.append(`<h5 class="ui-widget-header">Title ${i + 1}</h5>`);
    $item.append('<div class="sample-image"></div>');
    $(container).append($item);
  });
  
  // Make all drag items draggable
  $('.drag-item', $mainSection).draggable({
    revert: 'invalid', // when not dropped, the item will revert back to its initial position
    containment: 'document',
    helper: 'clone',
    cursor: 'move',
  });

  // Let the rightPanel containers (targets) be droppable, accepting items from the leftPanel
  $rightPanelTargets.droppable({
    accept: '#left-panel > .item-container > .drag-item',
    drop: function (event, ui) {
      dropImageRight(ui.draggable, event.target);
    },
  });

  // Let the leftPanel containers be droppable as well, accepting items from the rightPanel
  $leftPanelTargets.droppable({
    accept: '#right-panel > .item-container > .drag-item',
    drop: function (event, ui) {
      dropImageLeft(ui.draggable, event.target);
    },
  });

  // Move a draggable item from the leftPanel to the rightPanel
  function dropImageRight($item, target) {
    $item.fadeOut(function () {
      $item.appendTo(target).fadeIn();
    });
  }

  // Move a draggable item from the rightPanel to the leftPanel
  function dropImageLeft($item, target) {
    $item.fadeOut(function () {
      $item.appendTo(target).fadeIn();
    });
  }

});

#main * {
  box-sizing: border-box;
}

#left-panel {
  float: left;
  width: 250px;
}

#right-panel {
  float: left;
  width: 120px;
}

#left-panel h4,
#right-panel h4 {
  line-height: 16px;
  margin: 0 0 0.4em;
}

.item-container.ui-droppable-active:empty {
  background: #efe7ff;
}

.item-container.ui-droppable-active.ui-droppable-hover:empty {
  background: #d0bcfa;
}

.item-list > div {
  width: 112px;
  height: 112px;
  padding: 0.4em;
  margin: 0 0.4em 0.4em 0;
  text-align: center;
}

.item-list > div h5 {
  margin: 0 0 0.4em;
  cursor: move;
}

.item-list > div img {
  width: 100%;
  cursor: move;
}

.item-container {
  border: 1px solid #dddddd;
}

.sample-image {
  width: 75px;
  height: 75px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzQiIGhlaWdodD0iNzQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iMzciIGN5PSIzNyIgcj0iMzciIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcikiLz4KICA8cGF0aCBkPSJNMzcuNTAwMyA1OEM0OS4zNzQ0IDU4IDU5IDQ4LjM3NDMgNTkgMzYuNVM0OS4zNzQ0IDE1IDM3LjUwMDMgMTVDMjUuNjI2MSAxNSAxNiAyNC42MjU3IDE2IDM2LjVjMCAuMTY3MS4wMDE5LjMzMzguMDA1Ny41SDE2djMwLjQ2NzJjMi43NDQgMS44OTUgNS43NTY2IDMuNDI4OCA4Ljk2OSA0LjUzMjhIMjVWNTMuOTk0OEMyOC41MjI1IDU2LjUxNjEgMzIuODM4MSA1OCAzNy41MDAzIDU4eiIgZmlsbD0iI2ZmZiIvPgogIDxwYXRoIGQ9Ik01MCAzNi41QzUwIDQzLjQwMzYgNDQuNDAzNyA0OSAzNy41MDAxIDQ5IDMwLjU5NjYgNDkgMjUgNDMuNDAzNiAyNSAzNi41UzMwLjU5NjYgMjQgMzcuNTAwMSAyNEM0NC40MDM3IDI0IDUwIDI5LjU5NjQgNTAgMzYuNXoiIGZpbGw9IiNGQ0I0MkYiLz4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icGFpbnQwX2xpbmVhciIgeDE9IjM3IiB5MT0iMCIgeDI9IjM3IiB5Mj0iNzQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iI0ZCQjMyRiIvPgogICAgICA8c3RvcCBvZmZzZXQ9Ii41MDQ3MzkiIHN0b3AtY29sb3I9IiNDMTE1MTEiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjQzExNDExIi8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KPC9zdmc+');
}

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

<section id="main" class="ui-widget ui-helper-clearfix">

    <div id="left-panel" class="item-list">
        <div class="item-container"></div>  
        <div class="item-container"></div>
        <div class="item-container"></div>
        <div class="item-container"></div>
    </div>

    <div id="right-panel" class="item-list">
        <div class="item-container"></div>
        <div class="item-container"></div>
        <div class="item-container"></div>
        <div class="item-container"></div>
    </div>

</section>