logo标签列表

使用Jquery拖放多行HTML表格

jqueryjquery-ui
5

我想从一个表格中拖放多行到另一个表格中，请帮助我如何实现。请查看下面的fiddle链接（我从我们的论坛上获取）：

$(document).ready(function () {
    var $tabs = $('#table-draggable2')
    $("tbody.connectedSortable")
        .sortable({
            connectWith: ".connectedSortable",
            items: "> tr:not(:first)",
            appendTo: $tabs,
            helper: "clone",
            zIndex: 999990
        })
        .disableSelection();
    var $tab_items = $(".nav-tabs > li", $tabs).droppable({
        accept: ".connectedSortable tr",
        hoverClass: "ui-state-hover",
        drop: function (event, ui) {
            return false;
        }
    });
});

http://jsfiddle.net/balajipalamadai/t06m8ghb/

4个回答
3

我自己找到了解决方案，只是修改了这个代码片段的htmlhttp://jsfiddle.net/yf47u/使其能够正常工作。 我参考了这个帖子

请查看以下链接以获得相同的工作示例,

http://jsfiddle.net/balajipalamadai/83k9k/47/

<div id="table1" class="bitacoratable">
   <table id="table1" class="childgrid">
      <tr class="draggable_tr">
         <td>1</td>
         <td>Student 1</td>
      </tr>
      <tr class="draggable_tr">
         <td>2</td>
         <td>Student 2</td>
      </tr>
      <tr class="draggable_tr">
         <td>3</td>
         <td>Student 3</td>
      </tr>
      <tr class="draggable_tr">
         <td>4</td>
         <td>Student 4</td>
      </tr>
      <tr class="draggable_tr">
         <td>5</td>
         <td>Student 5</td>
      </tr>
   </table>
</div>
<div id="table2" class="bitacoratable">
   <table id="table2" class="childgrid">
      <tr class="draggable_tr">
         <td>6</td>
         <td>Student 6</td>
      </tr>
      <tr class="draggable_tr">
         <td>7</td>
         <td>Student 7</td>
      </tr>
      <tr class="draggable_tr">
         <td>8</td>
         <td>Student 8</td>
      </tr>
      <tr class="draggable_tr">
         <td>9</td>
         <td>Student 9</td>
      </tr>
      <tr class="draggable_tr">
         <td>10</td>
         <td>Student 10</td>
      </tr>
   </table>
</div>

感谢您，Balaji。
1
但是使用这种方法会产生一个问题，一旦我拖放了行，它就不再可拖动了。 - Ritu Gupta
1
这是选择多行进行拖放的示例代码。
使用Jquery实现，主要使用jquery.dataTables.min.js和jquery-ui.min.js脚本。
整个文章和演示可以在此处找到 使用jquery在html表格中拖放多行。

.

这也展示了内置分页和搜索的使用，希望这有所帮助。
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<link href="~/Scripts/jquery.dataTables.min.css" rel="stylesheet" />
<link href="~/Scripts/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {

        $("#tblEmployee tbody").sortable({
            start: function (e, ui) {
                var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
                ui.item.data('items', elements);
            },
            update: function (e, ui) {
                ui.item.after(ui.item.data("items"));
            },
            stop: function (e, ui) {
                ui.item.siblings('.selected').removeClass('hidden');
                $('tr.selected').removeClass('selected');
            }
        });

        $("#tblEmployee").dataTable({
            "pagingType": "simple"
        });

    });
</script> 

<table id="tblEmployee" class="table"> 
    <thead> 
        <tr> 
            <th> 
                ID
            </th> 
            <th> 
                Name
            </th>      
        </tr> 
    </thead> 
    <tbody> 
            <tr><td>1</td><td>Andy</td></tr>
            <tr><td>2</td><td>Mike</td></tr> 
            <tr><td>3</td><td>Lance</td></tr>
            <tr><td>4</td><td>Henry</td></tr> 
            <tr><td>5</td><td>Steve</td></tr>
            <tr><td>6</td><td>Mark</td></tr> 
    </tbody> 
</table>
0

    <table id="draggable" class="ui-sortable ui-droppable">
        <thead>
            <tr>
                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
        <tbody>
            <tr class="ui-draggable ui-draggable-handle ui-sortable-handle ui-draggable-dragging">
                <td>1</td>
                <td>Name A</td>
                <td>Name AA</td>
            </tr>
            <tr class="ui-draggable ui-draggable-handle ui-sortable-handle  ui-draggable-dragging">
                <td>2</td>
                <td>Name B</td>
                <td>Name BB</td>
            </tr>
            <tr class="ui-draggable ui-draggable-handle ui-sortable-handle">
                <td>3</td>
                <td>Name C</td>
                <td>Name CC</td>
            </tr>
            <tr class="ui-draggable ui-draggable-handle ui-sortable-handle">
                <td>4</td>
                <td>Name D</td>
                <td>Name DD</td>
            </tr>
            <tr class="ui-draggable ui-draggable-handle ui-sortable-handle">
                <td>5</td>
                <td>Name E</td>
                <td>Name EE</td>
            </tr>
            <tr class="ui-draggable ui-draggable-handle ui-sortable-handle">
                <td>6</td>
                <td>Name F</td>
                <td>Name FF</td>
            </tr>
            <tr class="ui-draggable ui-draggable-handle ui-sortable-handle">
                <td>7</td>
                <td>Name G</td>
                <td>Name GG</td>
            </tr>
            <tr class="ui-draggable ui-draggable-handle ui-sortable-handle">
                <td>8</td>
                <td>Name H</td>
                <td>Name HH</td>
            </tr>
        </tbody>
    </table>


    <table id="droppable" style="margin-top: 39px;" class="ui-sortable ui-droppable">
        <thead>
            <tr>
                <th>Id</th>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
        <tbody>
            <tr class="ui-draggable ui-draggable-handle ui-sortable-handle ui-draggable-dragging">
                <td>11</td>
                <td>Name A1</td>
                <td>Name AA1</td>
            </tr>
        </tbody>
    </table>
</div>

<div class="demo1">
    <p>Available Boxes (click to select multiple boxes)</p>
    <ul id="draggable1" style="background: #6b695d;">
        <li>
            <input type="checkbox" name="vehicle" value="Bike"> I have a Pen for Box #1</li>
        <li>
            <input type="checkbox" name="vehicle" value="Bike"> I have a Copy For Box #2</li>
        <li>
            <input type="checkbox" name="vehicle" value="Bike"> I have a Bag for Box #3</li>
        <li>
            <input type="checkbox" name="vehicle" value="Bike"> I have a Office for Box #4</li>
    </ul>
    <p>My Boxes</p>
    <ul id="droppable1" style="background: #907474;">
    </ul>
</div>
为解决当前问题，给出答案并附上一些解释以帮助 OP。 - ρяσѕρєя K
只需将上述文本添加到HTML标签的正文中，将下面的文本添加到脚本中。 - Vivek Gupta
请确保您已添加这些文件引用<link rel =“stylesheet”type =“text / css”href =“http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/mint-choc/jquery-ui.css”/> <script type =“text / javascript”src =“http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”> </ script> <script type =“text / javascript”src =“https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js”> </ script> - Vivek Gupta
0
$(document).ready(function() {

        function touchHandler(event) {
            var touch = event.changedTouches[0];

            var simulatedEvent = document.createEvent("MouseEvent");
            simulatedEvent.initMouseEvent({
                    touchstart: "mousedown",
                    touchmove: "mousemove",
                    touchend: "mouseup"
                }[event.type], true, true, window, 1,
                touch.screenX, touch.screenY,
                touch.clientX, touch.clientY, false,
                false, false, false, 0, null);

            touch.target.dispatchEvent(simulatedEvent);
            event.preventDefault();
        }

        function init() {
            document.addEventListener("touchstart", touchHandler, true);
            document.addEventListener("touchmove", touchHandler, true);
            document.addEventListener("touchend", touchHandler, true);
            document.addEventListener("touchcancel", touchHandler, true);
        }
        init();

        var bindDrag_drap = function(item1, item2) {

            $(item1, item2).droppable({
                drop: function(event, ui) {
                    $(this).append(ui.helper.children());
                    $('.' + selectedClass).remove();
                }
            });
            //$(item1, item2).sortable().droppable({
            //    drop: function (e, ui) {
            //        $('.' + selectedClass).appendTo($(this)).add(ui.draggable) // ui.draggable is appended by the script, so add it after
            //        .removeClass(selectedClass).css({
            //            top: 0,
            //            left: 0 
            //        });
            //    }
            //});
        };
        var bindDragMouseEvent = function(item) {
            $(item)
                // Script to deferentiate a click from a mousedown for drag event
                .bind('mousedown mouseup', function(e) {
                    if(e.type == "mousedown") {
                        lastClick = e.timeStamp; // get mousedown time
                    } else {
                        diffClick = e.timeStamp - lastClick;
                        if(diffClick < clickDelay) {
                            // add selected class to group draggable objects
                            $(this).toggleClass(selectedClass);
                            // $(this).toggleClass("selectedRow");
                            var el = $(this)[0].firstElementChild;
                            el.checked = $(this)[0].className.indexOf('ui-state-highlight') != -1 ? true : false;
                        }
                    }
                });
        };

        var bindDropEvent = function(item, contaier) {
            $(item).draggable({
                revertDuration: 10,
                // grouped items animate separately, so leave this number low
                containment: contaier,
                start: function(e, ui) {
                    ui.helper.addClass(selectedClass);
                },
                stop: function(e, ui) {
                    // reset group positions  
                    $('.' + selectedClass).css({
                        top: 0,
                        left: 0
                    });
                },
                helper: function() {
                    var selected = $('.' + selectedClass);
                    if(selected.length === 0) {
                        selected = $(this).addClass(selectedClass);
                    }
                    var container = $('<div/>').attr('id', 'draggingContainer');
                    container.append(selected.clone().removeClass(selectedClass));
                    return container;
                },
                drag: function(e, ui) {
                    // set selected group position to main dragged object 
                    $('.' + selectedClass).css({
                        top: ui.position.top,
                        left: ui.position.left
                    });

                }
            });
        };

        var selectedClass = 'ui-state-highlight',
            clickDelay = 600,
            // click time (milliseconds)
            lastClick, diffClick; // timestamps



        bindDragMouseEvent('#draggable1 li');
        bindDropEvent("#draggable1 li", '.demo1');
        bindDrag_drap("#droppable1, #draggable1");


        bindDragMouseEvent('#draggable tr');
        bindDropEvent("#draggable tr", '.demoTR');
        bindDrag_drap("#droppable, #draggable");



    });
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接