javascript - 将跨度组拖放到表格上的新位置

Question

我是 javascript + jquery 的新手，我正在开发一个调度工具，该工具可以迭代类(class)数据，将当前房间写入表中，并根据单元格的 id 创建类(class)并将其定位到表中。所有这些都工作正常，但我在使用 jquery-ui 扩展拖放功能时遇到了麻烦。

Please see fiddle here.

基本上，每门类(class)都有自己唯一的类别分配给该类(class)中的所有跨度(组###)，并且每个跨度都有自己唯一的 ID([abc...]###)。如果我捕获任何跨度，我希望能够将所述跨度及其在 .group### 中的 sibling 删除到新的计划位置(或者可能移动一个跨度，从旧位置删除其 sibling ，然后重新创建它们)在相关职位)但我不知道如何去做。我的真实代码将包含长达 7 周的类(class)，但为了清晰起见，fiddle 仅包含 2 周。

下面是拖放jquery(带有一些注释掉的想法)。

$(document).ready(function(){
    $("span").on("dragstart", function (event) {
        //var x = $(this).attr('class');
        //var z = $(this).attr('id');
        var dt = event.originalEvent.dataTransfer;
        dt.setData('Text', $(this).attr('id'))
    });
    $('table td').on("dragenter dragover drop", function (event) {
        event.preventDefault();
        if (event.type === 'drop') {
            var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
        de=$('#'+data).detach();
        de.appendTo($(this));
        //var x = $(de).attr('class').split(' ')[1];
        //var b = $("." + x +":not(:has(" + de +"))");
        //console.log(b);
        };
   });

});

Answer 1

您可能会喜欢一个基本示例:http://jqueryui.com/droppable/#photo-manager

由此，我们可以制作一个基本的工作示例:

$(function() {
  $(".crse").draggable({
    opacity: 0.35,
    revert: "invalid",
    containment: $("#scOut tbody"),
    helper: "clone",
    cursor: "move",
    start: function(e, ui) {
      $(this).parent().toggleClass("filled slot");
    }
  });
  $("td[id^='Room']").droppable({
    accept: ".crse",
    drop: function(e, ui) {
      addCourse(ui.draggable, $(this));
    }
  });

  function addCourse($item, $target) {
    $item.fadeOut(function() {
      $item
        .appendTo($target)
        .fadeIn();
    });
  }
});

table {
  border-collapse: collapse;
  width: 100%;
}

th,
tr td:nth-child(1) {
  font-size: 12px;
  font-weight: bold;
}

tr:nth-child(1n+2) {
  height: 50px;
}

tr:nth-child(2n+3) {
  background-color: #eee;
}

td:nth-child(4n+1) {
  border-right: 2px solid #000;
}

td {
  height: auto;
  min-width: 40px;
  width: auto;
  position: relative;
  max-width: 90px;
}

td:nth-child(1) {
  width: 110px;
}

td:nth-child(1n+1) {
  border-right: 2px solid #eee;
}

span {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 90%;
  width: 90%;
  padding: 2px;
  margin: 0;
  font-size: 10px;
  text-align: center;
  background-color: rgb(60, 181, 181);
}

tr:nth-child(1) th,
tr:nth-child(2) th:nth-child(4n),
td.rooms,
td:nth-child(4n+1) {
  border-right: 2px solid #000;
}

table tr td {
  position: relative;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<table id="scOut">
  <tr>
    <th rowspan="2" id="rooms" class="rooms">Room</th>
    <th colspan="4">Week1</th>
    <th colspan="4">Week2</th>
  </tr>
  <tr>
    <th id="scw1t1">8:30</th>
    <th id="scw1t2">12:00</th>
    <th id="scw1t3">3:15</th>
    <th id="scw1t4">6:30</th>
    <th id="scw2t1">8:30</th>
    <th id="scw2t2">12:00</th>
    <th id="scw2t3">3:15</th>
    <th id="scw2t4">6:30</th>
  </tr>
  <tr>
    <td>Room 1</td>
    <td id="Room_1scw1t1" class="filled">
      <span id="a100" class="crse group100">Course 1</span>
    </td>
    <td id="Room_1scw1t2" class="filled">
      <span id="a102" class="crse group102">Course 2</span>
    </td>
    <td id="Room_1scw1t3" class="slot"></td>
    <td id="Room_1scw1t4" class="slot"></td>
    <td id="Room_1scw2t1" class="filled">
      <span id="b100" class="crse group100">Course 1</span>
    </td>
    <td id="Room_1scw2t2" class="filled">
      <span id="b102" class="crse group102">Course 2</span>
    </td>
    <td id="Room_1scw2t3" class="slot"></td>
    <td id="Room_1scw2t4" class="slot"></td>
  </tr>
  <tr>
    <td>Room 2</td>
    <td id="Room_2scw1t1" class="slot"></td>
    <td id="Room_2scw1t2" class="slot"></td>
    <td id="Room_2scw1t3" class="filled">
      <span id="a103" class="crse group103">Course 3</span>
    </td>
    <td id="Room_2scw1t4" class="slot"></td>
    <td id="Room_2scw2t1" class="slot"></td>
    <td id="Room_2scw2t2" class="slot"></td>
    <td id="Room_2scw2t3" class="filled">
      <span id="b103" class="crse group103">Course 3</span>
    </td>
    <td id="Room_2scw2t4" class="slot"></td>
  </tr>
</table>

fiddle :https://jsfiddle.net/Twisty/rgw049r6/1/

如果您想根据选择器移动组，您可以这样做，但它更复杂。我们可以在 start 中将组数据添加到 helper 中，然后在 drop 中追加该组。或者，您可以简单地使用拖动的项目并在 drop 中创建组，然后追加该组。

<小时/>

更新

正如我提到的，移动多个项目可能会更加复杂。

考虑一下:https://jsfiddle.net/Twisty/rgw049r6/6/

我们必须检测发生了什么变化并针对其他项目。

JavaScript

$(function() {
  $(".crse").draggable({
    opacity: 0.35,
    revert: "invalid",
    containment: $("#scOut tbody"),
    helper: "clone",
    cursor: "move",
    start: function(e, ui) {
      $(this).parent().toggleClass("filled slot");
      ui.helper.data("source-id", $(this).parent().attr("id"));
    }
  });
  $("td[id^='Room']").droppable({
    accept: ".crse",
    drop: function(e, ui) {
      // perform the same for other items in group
      var cs = ui.draggable.attr("class").split(" ");
      var group, tCell;
      var $target = $(this);
      var src = parseId(ui.helper.data("source-id"));
      var trg = parseId($(this).attr("id"));
      $.each(cs, function(k, v) {
        if (v.indexOf("group") === 0) {
          group = v;
        }
      });
      $("." + group + ":not('.ui-draggable-dragging')").each(function(ind, elem) {
        var sID = parseId($(elem).parent().attr("id"));
        var tID = detectChange(sID, trg);
        addCourse($(elem), $("#" + tID.id));
      })
    }
  });

  function addCourse($item, $target, notHelper) {
    console.log("Adding: " + $item.attr("id") + " to: " + $target.attr("id"));
    var me;
    $item.fadeOut(function() {
      if (notHelper != true || notHelper == "undefined") {
        $item
          .appendTo($target)
          .fadeIn();
      } else {
        me = $item.detach();
        me.appendTo($target).fadeIn();
      }
    });
  }

  function parseId(s) {
    var results = {
      id: s,
      room: parseInt(s.slice(5, 6)),
      week: parseInt(s.slice(9, 10)),
      time: parseInt(s.slice(11, 12))
    };
    return results;
  }

  function makeId(r, w, t) {
    return "#Room_" + r + "scw" + w + "t" + t;
  }

  function detectChange(s, t) {
    var result = s;
    if (s.room != t.room) {
      result.room = t.room;
    }
    if (s.week != t.week) {
      result.week = s.week
    }
    if (s.time != t.time) {
      result.time = t.time;
    }
    result.id = "Room_" + result.room + "scw" + result.week + "t" + result.time;
    console.log(result);
    return result;
  }
});