JQuery：如何将多个行从一个表拖到另一个表中？ [英] JQuery: How to drag multiple rows from one table to another?

问题描述

以下是小提琴

我有一个带有可拖动行的表，它们是多选择的，但是我想将它们拖放到另一个表并将其放在那里 - 不要作为附加元素附加到另一个表，而是使用一些信息，即表单提交。

我的示例最初是基于我在这里找到的另一个演示：多拖曳演示

以下是此问题的基本示例的HTML代码。

 < table class =DraggableThings> 
< tr draggable ='true'>< td>行1< / td>< / tr> 
< tr draggable ='true'>< td>行2< / td>< / tr> 
< tr draggable ='true'>< td>行3< / td>< / tr> 
< / table> 
 
< table id ='menu_table'> 
< tbody> 
< tr> 
< td class ='droppableItem'>已完成< / td> 
< / tr> 
< / tbody> 
< / table> 
  

这是JQuery代码

<$ p $
.bind（'dragent dragover'，false）
.bind（'drop'，function（event）{
（$（this），event）;
}）;
$（'。DraggableThings tr'）。bind（'click'，function（）{
$（this）.toggleClass（selected）;
}）;
$（'。DraggableThings tr'）。bind（'dragstart'，function（event）{
var mytext = event.target.innerText;
event.originalEvent.dataTransfer.setData（' txt'，mytext）;
}）;
$（'。DraggableThings tr'）。drag（init，function（）{
return $（'。selected'）;
} ）{
$（this）.css（{
top：dd.offsetY，
left：dd.offsetX
}）;
}）;


函数完成（事件，事件）{
event.dataTransfer = event.originalEvent.dataTransfer;
var data = event.dataTransfer.getData（'txt'）;
log（data +make it to achievement）;
}

css

  .selected {
 background-color：#ECB; 
} 
  

这里是小提琴

希望有人知道答案
谢谢

解决方案

这是一个 JSFiddle 演示，但是我建议修复表格行，因为拖动多个行有时会使另一个表行混淆，因为它们没有间隔太多，因此无法确定您所在的表行试图放置元素。我做了更大的测试目的。

您可以按照点击而不是拖动来做某事，以确保将其添加到正确的类别。

与其他问题相同的代码，除非我们将其切换到 action（ui.helper.children（），event）; ，以便我们传递我们选择的元素（及其各自的文本）和事件，该事件返回表行的内部文本（即，完成，延迟和删除）。

重写的动作代码是：

  function action（a，b）{
 for（var i = 0; i  log（a [i] .innerText +make it to+ b.target.innerText）; 
} 
  

我们发布到一个循环的日志中，所以我们得到所有的元素我们分开选择。 b.target.innerText 获得类别（再次，即完成，延期和删除）。不循环通过它意味着我们得到所有元素的连接（例如Row1Row2）。

Here's the Fiddle

I have a table with draggable rows that are multi-selectable, but I want to drag them en masse to another table and drop them there - not to be appended as additional elements to the other table, but to do some stuff with the information, i.e. form submission.

My example is originally based on another demo I found here: multi drag demo

Here is the HTML code for the basic example of this problem.

<table class="DraggableThings">
  <tr draggable='true'><td >Row 1</td></tr>
  <tr draggable='true'><td >Row 2</td></tr>
  <tr draggable='true'><td >Row 3 </td></tr>
</table>

<table id='menu_table'>
  <tbody>
    <tr>
        <td class='droppableItem' >accomplished</td>
    </tr>
  </tbody>
</table>

Here is the JQuery code

$('.droppableItem')
   .bind('dragenter dragover', false)
   .bind('drop', function(event){
       accomplished($(this),event);
});
$('.DraggableThings tr').bind('click', function () {
   $(this).toggleClass("selected");
});
$('.DraggableThings tr').bind('dragstart', function(event){
  var mytext = event.target.innerText;
  event.originalEvent.dataTransfer.setData('txt', mytext );
});
$('.DraggableThings tr').drag("init", function () {
    return $('.selected');
  }).drag(function (ev, dd) {
    $(this).css({
        top: dd.offsetY,
        left: dd.offsetX
    });
});


function accomplished(thing,event) {
  event.dataTransfer = event.originalEvent.dataTransfer;
  var data = event.dataTransfer.getData('txt');
  log(data + " made it to accomplishments");
}

css

.selected {
  background-color: #ECB;
}

Here's the Fiddle

Hope someone knows the answer Thank you

解决方案

Here's a JSFiddle demonstration, but I suggest fixing up the table rows because dragging multiple rows sometimes confuses one table row for another because they're not spaced out that much, so it can't tell to which table row you're trying to place the elements. I made them bigger for testing purposes.

You could do something along the lines of clicking rather than dragging to guarantee you add it to the right category.

It's the same code as in your other question, except we switched it up to action(ui.helper.children(), event); so that we're passing the elements we selected (and their respective text) and the event, which returns the table row's inner text (i.e. accomplished, postponed, and deleted).

The rewritten action code is:

function action(a,b) {
    for(var i = 0; i < a.length; i++)
        log(a[i].innerText + " made it to " + b.target.innerText);
}

We post to the log in a loop, so that we get all the elements we selected separately. b.target.innerText gets the category (again, i.e. accomplished, postponed, and deleted). Not looping through it means we're getting the concatenation of all the elements (e.g. "Row1Row2").

这篇关于JQuery：如何将多个行从一个表拖到另一个表中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！