Question

我创建了一个可拖动的列表项，可以将其下垂在桌子上。当放在表格单元格上时，显示最左侧（即tbody tr td:first-child）和最顶部（即：thead tr th:first-child ）表上的位置值。桌子上每可拖动的物品的每一滴都显示其最左侧和最顶部的位置。另外，在拖动列表项并将其放在表上时，使其在表单元格中进一步可拖动，并根据表列值（最左侧）和表行值（顶部）找到其位置。

我已经在一个表格单元格上拖动了一个列表项，并且进一步可以在表格中拖动，但是原来的拖动项仍然是我不需要的，我想拖动相同的原始可拖动元素并放在另一个表格单元格上。

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

  var $listItem=$('#sort1 li');             
  $(  $listItem ).draggable({
    cancel: "a.ui-icon",
    revert: "invalid", // when not dropped, the item will revert back to its initial position
    containment: "document",
    helper: "clone",
    cursor: "move",
    appendTo: "body",
    refreshPositions: true
  });           
  $( "#sort1" ).selectable();           
  $( "#sort1" ).disableSelection();             
  var $container=$("#dropdiv table tbody td  ");
  console.log($($container));
  initDroppable($($container  ));

  function initDroppable($elements) {
    $elements.droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-drop-hover",
      accept: ":not(.ui-sortable-helper)", 
      over: function (event, ui) {
        var $this = $(this); //console.log($this)
      }, drop:function (event, ui) {    
        var $this = $(this);    
        console.log(ui.position)        
        var $item = ui.draggable.clone();   
        $item.draggable({       cancel:"a.ui-icon",         
        revert: 'invalid',      
        cursor: "move",         
        appendTo: "body",
      });   
      $(this).addClass('has-drop').append($item);
      console.log($item.attr('id')) } })            }           
      var $trash=$(' #sort1  li button ');          
      $( $trash ).droppable({
        cancel: "a.ui-icon",
        revert: "invalid", 
        containment: "document",
        helper: "clone",
        cursor: "move",
        appendTo: "body",
        refreshPositions: true,
        drop: function (event, ui) {
          var drag_id = $(ui.draggable).attr("id");
          var targetElem = $(this).attr("id");
          deleteMe = true;            
          $(this)
            .addClass("ui-state-highlight")
            .find("p")
            .html("Dropped! inside " + targetElem);
          $(ui.helper).remove(); //destroy clone
          $(ui.draggable).remove(); //remove from list    
        },    
        over:function(event,ui){
          console.log($(this));
        }
      });
    }       
  });   
</script>

mycode：https://jsfiddle.net/23ptag8j/17/

Answer 1

您想要的东西已经很清楚了，但这似乎有点不可思议。请考虑以下内容：

https://jsfiddle.net/Twisty/mkz1xLy0/62/

HTML

<div class="container">
  <div id="right">
    <div id="dropdiv">
      <table border="3 " class="table">
        <thead>
          <tr>
            <th>Day/shift</th>
            <th id="shift1">7:15-8:45</th>
            <th id="shift2">8:45-9:30</th>
            <th id="shift3">9:30-10:15</th>
            <th id="shift4">11:00-11:45</th>
            <th id="shift5">11:45-12:30</th>
            <th id="shift6">12:30-13:15</th>
            <th id="shift7">1:15-14:00</th>
          </tr>
        </thead>
        <tbody id="body">
          <tr id="con1" class="sortConn">
            <td id="row">Sunday</td>
            <td class="span drop"><span class="ui-state-default " id="1"></span></td>
            <td class="span drop"><span class="ui-state-default" id="2"></span></td>
            <td class="span drop"><span class="ui-state-default" id="3"></span> </td>
            <td class="span drop"><span class="ui-state-default" id="4"></span></td>
            <td class="span drop"><span class="ui-state-default" id="5"></span></td>
            <td class="span drop"><span class="ui-state-default" id="6"></span></td>
            <td class="span drop"><span class="ui-state-default" id="7"></span></td>
          </tr>
          <tr id="con2" class="sortConn">
            <td id="row">Monday</td>
            <td class="span drop"><span class="ui-state-default " id="8"></span></td>
            <td class="span drop"><span class="ui-state-default" id="9"></span></td>
            <td class="span drop"><span class="ui-state-default" id="10"></span></td>
            <td class="span drop"><span class="ui-state-default" id="11"></span></td>
            <td class="span drop"><span class="ui-state-default" id="12"></span></td>
            <td class="span drop"><span class="ui-state-default" id="13"></span></td>
            <td class="span drop"><span class="ui-state-default" id="14"></span></td>
          </tr>
          <tr id="con3" class="sortConn">
            <td id="row">Tuesday</td>
            <td class="span drop"><span class="ui-state-default" id="15"></span></td>
            <td class="span drop"><span class="ui-state-default" id="16"></span></td>
            <td class="span drop"><span class="ui-state-default" id="17"></span></td>
            <td class="span drop"><span class="ui-state-default" id="18"></span></td>
            <td class="span drop"><span class="ui-state-default" id="19"></span></td>
            <td class="span drop"><span class="ui-state-default" id="20"></span></td>
            <td class="span drop"><span class="ui-state-default" id="21"></span></td>
          </tr>
          <tr id="con4" class="sortConn">
            <td id="row">Wednesday</td>
            <td class="span drop"><span class="ui-state-default" id="22"></span></td>
            <td class="span drop"><span class="ui-state-default" id="23"></span></td>
            <td class="span drop"><span class="ui-state-default" id="24"></span></td>
            <td class="span drop"><span class="ui-state-default" id="25"></span></td>
            <td class="span drop"><span class="ui-state-default" id="26"></span></td>
            <td class="span drop"><span class="ui-state-default" id="27"></span></td>
            <td class="span drop"><span class="ui-state-default" id="28"></span></td>
          </tr>
          <tr id="con5" class="sortConn">
            <td id="row">Thrusday</td>
            <td class="span drop"><span class="ui-state-default" id="29"></span></td>
            <td class="span drop"><span class="ui-state-default" id="30"></span></td>
            <td class="span drop"><span class="ui-state-default" id="31"></span></td>
            <td class="span drop"><span class="ui-state-default" id="32"></span></td>
            <td class="span drop"><span class="ui-state-default" id="33"></span></td>
            <td class="span drop"><span class="ui-state-default" id="34"></span></td>
            <td class="span drop"><span class="ui-state-default" id="35"></span></td>
          </tr>
          <tr id="con6" class="sortConn">
            <td id="row">Friday</td>
            <td class="span drop"><span class="ui-state-default" id="36"></span></td>
            <td class="span drop"><span class="ui-state-default" id="37"></span></td>
            <td class="span drop"><span class="ui-state-default" id="38"></span></td>
            <td class="span drop"><span class="ui-state-default" id="39"></span></td>
            <td class="span drop"><span class="ui-state-default" id="40"></span></td>
            <td class="span drop"><span class="ui-state-default" id="41"></span></td>
            <td class="span drop"><span class="ui-state-default" id="42"></span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div id="drag-list">
    <div id="origin" class="card">
      <ul id="sort-1" class="list">
        <li id="one">English</li>
        <li id="two">Nepali</li>
        <li id="three">Economics</li>
      </ul>
      <button>Trash</button>
    </div>
  </div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.card {
  height: 340px;
  width: 232px;
  margin-left: 20px;
  margin-top: 50px;
}

#sort-1 {
  list-style: none;
  margin: 3px;
  margin-bottom: 10px;
}

#sort-1 li {
  margin-top: 10px;
}

.list {
  margin-left: 5px;
}

#right {
  float: right;
  margin-right: 20px;
}

.drag-card {
  background: #ccc;
  color: #000;
  border: 1px solid #222;
  border-radius: 3px;
  padding: 0.2em;
}

.drop-card {
  padding: 0;
  display: inline-block;
  width: 98%;
  text-align: center;
}

JavaScript

$(function() {
  function makeDrag(el, clone) {
    if (clone == undefined) {
      clone = false;
    }
    var $d = $(el).draggable({
      cancel: "a.ui-icon",
      revert: "invalid",
      containment: ".container",
      helper: function(e) {
        if (clone) {
          var cnt = $(e.target).text();
          return $("<div>", {
            class: "drag-card"
          }).html(cnt);
        }
        return $(e.target);
      },
      cursor: "move",
      appendTo: "body",
      refreshPositions: true
    });
    return $d;
  }
  var $listItem = $('#sort-1 li');
  makeDrag($listItem, true);
  $("#sort-1").selectable();
  $("#sort-1").disableSelection();
  var $dropItems = $("#dropdiv .drop");
  initDroppable($dropItems);

  function initDroppable($elements) {
    $elements.droppable({
      classes: {
        "ui-droppable-hover": "ui-state-hover"
      },
      accept: ":not(.ui-sortable-helper)",
      drop: function(event, ui) {
        var $this = $(this);
        var $item = $("<div>", {
            class: "drop-card"
          })
          .html(ui.helper.text());
        $("span", $this).append($item);
        makeDrag($item);
        ui.helper.remove();
      }
    })
  }
  var $trash = $('#drag-list button');
  $trash.button({
      icon: "ui-icon-trash"
    })
    .click(function(e) {
      e.preventDefault();
      var retval = confirm("Are you sure you want to empty the trash?");
      if (retval) {
        // Empty Trash
        $trash.removeClass("ui-state-highlight");
      }
    })
    .droppable({
      drop: function(event, ui) {
        var drag_id = $(ui.draggable).attr("id");
        var targetElem = $(this).attr("id");
        deleteMe = true;
        $(this)
          .addClass("ui-state-highlight")
          .find("p")
          .html("Dropped! inside " + targetElem);
        ui.helper.remove();
        ui.draggable.remove();
      }
    });
});

这是我要处理的条件：

可以将拖动列表中的一张卡片拖动到表格中；放下后，该项目会附加到该单元格中，原始的会保留
添加到单元格的项目在放置后应可拖动
将一个项目从一个单元格移动到另一个单元格时，应删除原点
将某项拖到“废纸，”时，应将其删除

我为此做的事情：

将drop类添加到应允许删除该项目的所有单元格中
创建了单个函数makeDrag，以使元素可在默认情况下为clone的{{1}}条件下进行拖动
为每个false单元添加了唯一的ID，以获取正确的HTML语法

更新

https://jsfiddle.net/Twisty/mkz1xLy0/69/

我在drop回调中添加了以下内容：

drop

如您所见，放置物品时，我们禁用放置功能。然后，我们在$this.droppable("disable"); makeDrag($item); $item.on("dragstart", function(e, ui){ $item.closest(".drop").droppable("enable"); });事件中重新启用它。

我希望这适合您的设计并对您有所帮助。

当放置在桌子上时，根据桌子找到可拖动列表项的位置

1 个答案: