найти позицию перетаскиваемого элемента списка, основываясь на таблице, при падении на таблицу - PullRequest
Новая
       2

найти позицию перетаскиваемого элемента списка, основываясь на таблице, при падении на таблицу

0 голосов
/ 17 мая 2019

Я создал перетаскиваемый элемент списка, который можно опустить на стол.При падении на ячейку таблицы отображается самое левое (т. Е. 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>

мой код: https://jsfiddle.net/23ptag8j/17/

1 Ответ

0 голосов
/ 22 мая 2019

Было достаточно ясно, что вы хотели, но это казалось странным. Учтите следующее:

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, которое по умолчанию false
  • Добавлен уникальный идентификатор в каждую ячейку drop для правильного синтаксиса HTML

Обновление

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

Я добавил следующее к drop обратному вызову: 

$this.droppable("disable");
makeDrag($item);
$item.on("dragstart", function(e, ui){
  $item.closest(".drop").droppable("enable");
});

Как видите, мы отключаем функцию сброса, когда предмет сбрасывается. Затем мы снова включаем его в событии dragstart.

Надеюсь, это соответствует вашему дизайну и полезно для вас.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...