jQuery拖放div示例
#javascript #html #bootstrap #jquery

在本文中，我们将看到一个jQuery拖放示例。对于此示例，我们使用可排序的JS。

排序是用于可重新排序拖放列表的JavaScript库。您可以为现代浏览器和触摸设备重新排序拖放列表。不需要jQuery或框架。

所以，让我们看一下可拖动的div jquery，jQuery中的可拖放元素，jQuery排序列表，可排序的拖放和删除javascript，可排序的js，拖放元件js jquery，在jquery中进行排序，使用jquery录制div，使用jquery，使用jquery li jquery li jquerying li 。

另外，您可以安装sortablejs。

步骤1：添加html

在此步骤中，我们将添加html，如以下代码示例。

<html>
    <head>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

        <!-- Latest Sortable -->
        <script src="http://SortableJS.github.io/Sortable/Sortable.js"></script>
    </head>
    <body>
        <h2>jQuery Drag And Drop Div Example - Techsolutionstuff</h2>
        <input type="checkbox" value="1" name="autoSubmit" id="autoSubmit" checked="checked">Auto Sort

        <ul id="sortable-list" class="ui-sortable" unselectable="on" style="-moz-user-select: none;">    
            <li title="1">Item 1</li>
            <li title="2">Item 2</li>
            <li title="3">Item 3</li>
            <li title="4">Item 4</li>   
            <li title="5">Item 5</li>
            <li title="6">Item 6</li>
          </ul>

        <input type="hidden" name="sort_order" id="sort_order" value="1,2,3,4,5,6" />

        Last order: <span id="sort-result"></span>
    </body>
</html

步骤2：添加CSS

现在，我们正在为布局添加CSS。

#sortable-list li {
  list-style: none;
  background-color:#e5e5e5;
  border-bottom: 1px solid #f8f8f8;
  padding:7px;
  margin:7px;
  width:15%;
  text-align:center;  
}
ul{
  display:flex;
}

#sort-result {
  color: brown;
}

h2{
  text-align:center;
  margin-top:50px;
}
body{
  width:60%;
  margin:50px
}

步骤3：添加JavaScript

在此步骤中，我们使用sortable（）函数对li元素进行排序。

<script>
var submit = $('#autoSubmit'),
      list = $('#sortable-list'),
      sortInput = $('#sort_order');

var fnSubmit = function(save){
    var sortOrder = [];
    list.children('li').each(function(){
        sortOrder.push($(this).data('id'));
    });

    sortInput.val(sortOrder.join(','));

    $('#sort-result').text(sortOrder);   
};

/* store values */
list.children('li').each(function() {
      var li = $(this);

    //store value and clear title value
    li.data('id',li.attr('title')).attr('title','');

});

/* sortables */
list.sortable({
  opacity: 0.7,
  update: function() {
    fnSubmit(submit[0].checked); //.checked return boolean
  }
});

</script>

输出：

jQuery Drag And Drop Div Example