自定义拖放jQuery UI

时间：2019-02-19 19:54:44

标签： jquery jquery-ui drag-and-drop

我正在使用jquery ui进行拖放。我将放置的项目ID连接到名为“ 结果”的变量，并使用该变量创建一个数组。

我的预期输出如下：

[
  {
    "id": "thu_r2", 
    "shift": [
      {
        "shift_id": "thu_r2_mo",
        "child":[
          {"ch_id": "room_lst_2"}, 
          {"ch_id": "course_lst_1"} 
        ]
      }, 
      {
        "shift_id": "thu_r2_ni",
        "child":[
          {"ch_id": "course_lst_2"} 
        ]
      } 
    ]
  }, 
  {
    "id": "fri_r3", 
    "shift": [
      {
        "shift_id": "fri_r3_mo",
        "child":[
          {"ch_id": "room_lst_3"} 
        ]
      } 
    ]
  }
]

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Drag and drop</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
    <style type="text/css">
        .draggable { padding: 2px 5px 2px 5px; cursor: move; border: 1px solid #c1c1c1; float: none !important; width: 100%; }
        .droppable { min-width: 160px; min-height: 50px; background: #c8c1c14d; margin: 5px; display:inline-block; }
        .droppable .draggable{ width: auto; height: unset; margin: 10px; }
        .delete{ text-align: right; font-weight: bold; color: #254aea; display: none; }
        span .delete{ float: right; }
        .draggable:hover .delete {  display:block; }
        .room { min-width: 150px; min-height: 150px; background: #ecececb3; margin: 5px; display:inline-block; }
        .ui-droppable-hover{ background: #007bff; }
    </style>
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col-md-10">
            <div class="table-responsive">
                <table class="table">
                    <tr>
                        <th>&nbsp;</th>
                        <th>Room1</th>
                        <th>Room2</th>
                        <th>Room3</th>
                        <th>Room4</th>
                    </tr>
                    <tr>
                        <th>Thursday</th>
                        <td>
                            <div class="room" id="thu_r1">
                                <div class="droppable" id="thu_r1_mo"></div>
                                <div class="droppable" id="thu_r1_da"></div>
                                <div class="droppable" id="thu_r1_ni"></div>
                            </div>
                        </td>
                        <td>
                            <div class="room" id="thu_r2">
                                <div class="droppable" id="thu_r2_mo"></div>
                                <div class="droppable" id="thu_r2_da"></div>
                                <div class="droppable" id="thu_r2_ni"></div>
                            </div>
                        </td>
                        <td>
                            <div class="room" id="thu_r3">
                                <div class="droppable" id="thu_r3_mo"></div>
                                <div class="droppable" id="thu_r3_da"></div>
                                <div class="droppable" id="thu_r3_ni"></div>
                            </div>
                        </td>
                        <td>
                            <div class="room" id="thu_r4">
                                <div class="droppable" id="thu_r4_mo"></div>
                                <div class="droppable" id="thu_r4_da"></div>
                                <div class="droppable" id="thu_r4_ni"></div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>Friday</th>
                        <td>
                            <div class="room" id="fri_r1">
                                <div class="droppable" id="fri_r1_mo"></div>
                                <div class="droppable" id="fri_r1_da"></div>
                                <div class="droppable" id="fri_r1_ni"></div>
                            </div>
                        </td>
                        <td>
                            <div class="room" id="fri_r2">
                                <div class="droppable" id="fri_r2_mo"></div>
                                <div class="droppable" id="fri_r2_da"></div>
                                <div class="droppable" id="fri_r2_ni"></div>
                            </div>
                        </td>
                        <td>
                            <div class="room" id="fri_r3">
                                <div class="droppable" id="fri_r3_mo"></div>
                                <div class="droppable" id="fri_r3_da"></div>
                                <div class="droppable" id="fri_r3_ni"></div>
                            </div>
                        </td>
                        <td>
                            <div class="room" id="fri_r4">
                                <div class="droppable" id="fri_r4_mo"></div>
                                <div class="droppable" id="fri_r4_da"></div>
                                <div class="droppable" id="fri_r4_ni"></div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="col-md-2">
            <div class="table-responsive">
                <table class="table">
                    <tr>
                        <th>Course List</th>
                    </tr>
                    <tr>
                        <td>
                            <div class="draggable alert alert-primary" id="course_lst_1"><span class="header"></span> Course One </div>
                            <div class="draggable alert alert-primary" id="course_lst_2"><span class="header"></span> Course Two </div>
                            <div class="draggable alert alert-primary" id="course_lst_3"><span class="header"></span> Course Three </div>
                        </td>
                    </tr>
                    <tr>
                        <th>Module</th>
                    </tr>
                    <tr>
                        <td>
                            <div class="draggable alert alert-primary" id="module_1"><span class="header"></span> Module One </div>
                            <div class="draggable alert alert-primary" id="module_2"><span class="header"></span> Module Two </div>
                            <div class="draggable alert alert-primary" id="module_3"><span class="header"></span> Module Three</div>
                        </td>
                    </tr>
                    <tr>
                        <th>Staff Name</th>
                    </tr>
                    <tr>
                        <td>
                            <div class="draggable alert alert-primary" id="staff_1"><span class="header"></span> Staff One </div>
                            <div class="draggable alert alert-primary" id="staff_2"><span class="header"></span> Staff Two </div>
                            <div class="draggable alert alert-primary" id="staff_3"><span class="header"></span> Staff Three </div>
                            <div class="draggable alert alert-primary" id="staff_4"><span class="header"></span> Staff Four </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <p class="text-center show_result"></p>
        </div>
    </div>
</div>

<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>

<script type="text/javascript">
    var result;
    var parentDivArray = [];
    var parentDroppableArray = [];
    var dropDragArray = [];
    var droppableDuplicates = [];
    var uniquePrntDropArray = [];
    var countDropped = 0;
    var removeData = false;

    $('.draggable').draggable({
      revert: "invalid",
      stack: ".draggable",
      helper: 'clone',
      start: function( event, ui ) {
         $(this).addClass('my_class');
     },
      stop: function( event, ui ) {
         $(this).removeClass('my_class');
     }
    });
    $('.droppable').droppable({
      accept: ".draggable",
      drop: function(event, ui) {
        var droppable = $(this);
        var draggable = ui.draggable;
        var drag = $('.droppable').has(ui.draggable).length ? draggable : draggable.clone().draggable({
          revert: "invalid",
          stack: ".draggable",
          helper: 'clone'
        });
        drag.appendTo(droppable);
        draggable.css({
          float: 'left'
        });
        drag.draggable( 'disable' )

        var droppableDivId = $(this).attr('id');

        var draggableDivId = $(draggable).attr('id');

        var parentDivId = $(this).parent('div').attr('id');
        if(parentDivArray.indexOf(parentDivId) === -1){
            parentDivArray.push(parentDivId);
        }

        // ----------------Remove dropped item------------------
        var el = $("<span><a href='Javascript:void(0)' class=\"xicon delete\" title=\"Remove\">X</a></span>");
                  $(el).insertAfter($($('#'+droppableDivId).find('#'+draggableDivId).find('.header')));

        $('.my_class .delete').on('click', function () {
            $(this).parent().parent('div').remove();
            var draggedElement = $(this).parent().parent().attr('id');
            var droppedElement = $('#'+droppableDivId).attr('id');
            var parentElement = parentDivId;

            removeData = true;
        });
        // ----------------/Remove dropped item------------------

        var parentDroppable = {
            "id": parentDivId,
            "shift_id": droppableDivId
        };
        parentDroppableArray.push(parentDroppable);
        $.each(parentDroppableArray, function(i, pDroppableDiv){

            if(!droppableDuplicates[pDroppableDiv['shift_id']]){
                droppableDuplicates[pDroppableDiv['shift_id']] = true;

                uniquePrntDropArray.push(pDroppableDiv);
            }

        });

        var dropDrag = {
            "shift_id": droppableDivId,
            "child_id": draggableDivId
        };
        dropDragArray.push(dropDrag);

        result = '[';
        $.each(parentDivArray, function(r, parentDiv){

            var pComma = r != parentDivArray.length-1 ? ', ':'';
            result += '{"id": "' + parentDiv + '", "shift": [';

            $.each(uniquePrntDropArray, function(indx, uniqPrntDropDiv){

                if(uniqPrntDropDiv['id'] == parentDiv){

                    var dComma = ', ';
                    result += '{';
                    result +=   '"shift_id": "' + uniqPrntDropDiv['shift_id'] + '", ';
                    result +=   '"child":[';

                    $.each(dropDragArray, function(cIndex, dropDragDiv){

                        if(dropDragDiv['shift_id'] == uniqPrntDropDiv['shift_id']){
                            var gComma = ', ';
                            if(removeData === true){
                                result -=           '{"ch_id": "' + dropDragDiv['child_id'] + '"}' + gComma;
                            }else{
                                result +=           '{"ch_id": "' + dropDragDiv['child_id'] + '"}' + gComma;
                            }
                        }

                    });

                    result +=   ']';
                    result += '}' + dComma;
                }
            });
            result += ']}' + pComma;
        });
        result += ']';

        console.log(result);
        $('.show_result').text(result);
      }
    });
</script>

</body>
</html>

问题： 删除放置的项目时，无法从变量“ 结果”中将其删除。要删除，我尝试了以下代码。但这没用。

// ----------------Remove dropped item------------------
        var el = $("<span><a href='Javascript:void(0)' class=\"xicon delete\" title=\"Remove\">X</a></span>");
                  $(el).insertAfter($($('#'+droppableDivId).find('#'+draggableDivId).find('.header')));

        $('.my_class .delete').on('click', function () {
            $(this).parent().parent('div').remove();
            var draggedElement = $(this).parent().parent().attr('id');
            var droppedElement = $('#'+droppableDivId).attr('id');
            var parentElement = parentDivId;

            removeData = true;

            var removeIt = '{"ch_id": "' + draggedElement + '"}';
            result += result.replace(removeIt,'');
            console.log(result);
        });
        // ----------------Remove dropped item------------------

2 个答案:

答案 0 :(得分：0)

请考虑以下内容。

  function serialize(tObj) {
    var rArr = [];
    var rooms = $(".room", tObj);
    rooms.each(function(rInd, rEl) {
      rArr[rInd] = {
        id: $(rEl).attr("id"),
        shift: []
      };
      rooms.eq(rInd)
        .find(".shift").each(function(sInd, sEl) {
          rArr[rInd].shift.push({
            shift_id: $(sEl).attr("id"),
            child: []
          });
          rooms.eq(rInd)
            .find(".shift").eq(sInd)
            .find(".draggable").each(function(dInd, dEl) {
              rArr[rInd].shift[sInd].child.push({
                ch_id: $(dEl).attr("id")
              });
            });
        });
    });
    return rArr;
  }

这将返回一个对象数组。您可以像这样使用它。

$(function() {
  var result;
  var parentDivArray = [];
  var parentDroppableArray = [];
  var dropDragArray = [];
  var droppableDuplicates = [];
  var uniquePrntDropArray = [];
  var countDropped = 0;
  var removeData = false;

  function serialize(tObj, empty) {
    if (empty == undefined) {
      empty = false;
    }
    var rArr = [];
    var rooms = $(".room", tObj);
    rooms.each(function(rInd, rEl) {
      rArr[rInd] = {
        id: $(rEl).attr("id"),
        shift: []
      };
      rooms.eq(rInd)
        .find(".shift").each(function(sInd, sEl) {
          rArr[rInd].shift.push({
            shift_id: $(sEl).attr("id"),
            child: []
          });
          rooms.eq(rInd)
            .find(".shift").eq(sInd)
            .find(".draggable").each(function(dInd, dEl) {
              rArr[rInd].shift[sInd].child.push({
                ch_id: $(dEl).attr("id")
              });
            });
        });
    });
    if (empty) {
      // remove empty items from array
      $.each(rArr, function(i, r) {
        $.each(r.shift, function(j, s) {
          if (s.child.length == 0) {
            delete rArr[i].shift[j];
          }
        });
        r.shift = r.shift.filter(function(a) {
          return a != null;
        });
      });
    }
    return rArr;
  }

  $('.draggable').draggable({
    revert: "invalid",
    stack: ".draggable",
    helper: 'clone',
    start: function(event, ui) {
      $(this).addClass('my_class');
    },
    stop: function(event, ui) {
      $(this).removeClass('my_class');
    }
  });

  $('.droppable').droppable({
    accept: ".draggable",
    drop: function(event, ui) {
      var droppable = $(this);
      var draggable = ui.draggable;
      var drag = $('.droppable').has(ui.draggable).length ? draggable : draggable.clone().draggable({
        revert: "invalid",
        stack: ".draggable",
        helper: 'clone'
      });
      drag.appendTo(droppable);

      draggable.css({
        float: 'left'
      });
      drag.draggable('disable');

      var droppableDivId = $(this).attr('id');

      var draggableDivId = $(draggable).attr('id');

      var parentDivId = $(this).parent('div').attr('id');
      if (parentDivArray.indexOf(parentDivId) === -1) {
        parentDivArray.push(parentDivId);
      }

      // ----------------Remove dropped item------------------
      var el = $("<span><a href='Javascript:void(0)' class=\"xicon delete\" title=\"Remove\">X</a></span>");
      $(el).insertAfter($($('#' + droppableDivId).find('#' + draggableDivId).find('.header')));

      $('.my_class .delete').on('click', function() {
        $(this).parent().parent('div').remove();
        var draggedElement = $(this).parent().parent().attr('id');
        var droppedElement = $('#' + droppableDivId).attr('id');
        var parentElement = parentDivId;

        removeData = true;
        console.log(serialize($(".table")));
        result = serialize($(".table"), true);
      });
      // ----------------/Remove dropped item------------------

      var parentDroppable = {
        "id": parentDivId,
        "shift_id": droppableDivId
      };
      parentDroppableArray.push(parentDroppable);
      $.each(parentDroppableArray, function(i, pDroppableDiv) {

        if (!droppableDuplicates[pDroppableDiv.shift_id]) {
          droppableDuplicates[pDroppableDiv.shift_id] = true;

          uniquePrntDropArray.push(pDroppableDiv);
        }

      });

      var dropDrag = {
        "shift_id": droppableDivId,
        "child_id": draggableDivId
      };
      dropDragArray.push(dropDrag);

      //console.log(serialize($(".table")));
      result = serialize($(".table"), true);

      $('.show_result').text(JSON.stringify(result));
    }
  });
});
.draggable {
  padding: 2px 5px 2px 5px;
  cursor: move;
  border: 1px solid #c1c1c1;
  float: none !important;
  width: 100%;
}

.droppable {
  min-width: 160px;
  min-height: 50px;
  background: #c8c1c14d;
  margin: 5px;
  display: inline-block;
}

.droppable .draggable {
  width: auto;
  height: unset;
  margin: 10px;
}

.delete {
  text-align: right;
  font-weight: bold;
  color: #254aea;
  display: none;
}

span .delete {
  float: right;
}

.draggable:hover .delete {
  display: block;
}

.room {
  min-width: 150px;
  min-height: 150px;
  background: #ecececb3;
  margin: 5px;
  display: inline-block;
}

.ui-droppable-hover {
  background: #007bff;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-10">
      <div class="table-responsive">
        <table class="table">
          <tr>
            <th>&nbsp;</th>
            <th>Room1</th>
            <th>Room2</th>
            <th>Room3</th>
            <th>Room4</th>
          </tr>
          <tr>
            <th>Thursday</th>
            <td>
              <div class="room" id="thu_r1">
                <div class="shift droppable" id="thu_r1_mo"></div>
                <div class="shift droppable" id="thu_r1_da"></div>
                <div class="shift droppable" id="thu_r1_ni"></div>
              </div>
            </td>
            <td>
              <div class="room" id="thu_r2">
                <div class="shift droppable" id="thu_r2_mo"></div>
                <div class="shift droppable" id="thu_r2_da"></div>
                <div class="shift droppable" id="thu_r2_ni"></div>
              </div>
            </td>
            <td>
              <div class="room" id="thu_r3">
                <div class="shift droppable" id="thu_r3_mo"></div>
                <div class="shift droppable" id="thu_r3_da"></div>
                <div class="shift droppable" id="thu_r3_ni"></div>
              </div>
            </td>
            <td>
              <div class="room" id="thu_r4">
                <div class="shift droppable" id="thu_r4_mo"></div>
                <div class="shift droppable" id="thu_r4_da"></div>
                <div class="shift droppable" id="thu_r4_ni"></div>
              </div>
            </td>
          </tr>
          <tr>
            <th>Friday</th>
            <td>
              <div class="room" id="fri_r1">
                <div class="shift droppable" id="fri_r1_mo"></div>
                <div class="shift droppable" id="fri_r1_da"></div>
                <div class="shift droppable" id="fri_r1_ni"></div>
              </div>
            </td>
            <td>
              <div class="room" id="fri_r2">
                <div class="shift droppable" id="fri_r2_mo"></div>
                <div class="shift droppable" id="fri_r2_da"></div>
                <div class="shift droppable" id="fri_r2_ni"></div>
              </div>
            </td>
            <td>
              <div class="room" id="fri_r3">
                <div class="shift droppable" id="fri_r3_mo"></div>
                <div class="shift droppable" id="fri_r3_da"></div>
                <div class="shift droppable" id="fri_r3_ni"></div>
              </div>
            </td>
            <td>
              <div class="room" id="fri_r4">
                <div class="shift droppable" id="fri_r4_mo"></div>
                <div class="shift droppable" id="fri_r4_da"></div>
                <div class="shift droppable" id="fri_r4_ni"></div>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>

    <div class="col-md-2">
      <div class="table-responsive">
        <table class="table">
          <tr>
            <th>Course List</th>
          </tr>
          <tr>
            <td>
              <div class="draggable alert alert-primary" id="course_lst_1"><span class="header"></span> Course One </div>
              <div class="draggable alert alert-primary" id="course_lst_2"><span class="header"></span> Course Two </div>
              <div class="draggable alert alert-primary" id="course_lst_3"><span class="header"></span> Course Three </div>
            </td>
          </tr>
          <tr>
            <th>Module</th>
          </tr>
          <tr>
            <td>
              <div class="draggable alert alert-primary" id="module_1"><span class="header"></span> Module One </div>
              <div class="draggable alert alert-primary" id="module_2"><span class="header"></span> Module Two </div>
              <div class="draggable alert alert-primary" id="module_3"><span class="header"></span> Module Three</div>
            </td>
          </tr>
          <tr>
            <th>Staff Name</th>
          </tr>
          <tr>
            <td>
              <div class="draggable alert alert-primary" id="staff_1"><span class="header"></span> Staff One </div>
              <div class="draggable alert alert-primary" id="staff_2"><span class="header"></span> Staff Two </div>
              <div class="draggable alert alert-primary" id="staff_3"><span class="header"></span> Staff Three </div>
              <div class="draggable alert alert-primary" id="staff_4"><span class="header"></span> Staff Four </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <p class="text-center show_result"></p>
    </div>
  </div>
</div>

可能需要一些清理和工作，但这会有所帮助。

答案 1 :(得分：0)

我已通过以下另一种方法解决了该问题：https://stackoverflow.com/a/27045333/3278639 

$('.draggable').draggable({
    revert: "invalid",
    stack: ".draggable",
    helper: 'clone'
});

$('.droppable').droppable({
    accept: ".draggable",
    drop: function(event, ui) {
        var droppable = $(this);
        var draggable = ui.draggable;

        // Move draggable into droppable
        var drag = $('.droppable').has(ui.draggable).length ? draggable : draggable.clone().draggable({
            revert: "invalid",
            stack: ".draggable",
            helper: 'clone'
        });

        drag.appendTo(droppable);
        draggable.css({
            float: 'left'
        });

        drag.draggable( 'disable' )

        var droppableDivId = $(this).attr('id');
        var draggableDivId = $(draggable).attr('id');


        // ----------------Remove Selected Element------------------
        var el = $("<span><a href='Javascript:void(0)' class=\"xicon delete\" title=\"Remove\">X</a></span>");
        $(el).insertAfter($($('#'+droppableDivId).find('#'+draggableDivId).find('.header')));

        $('.delete').on('click', function () {
            $(this).parent().parent('div').remove();
        });
        // ----------------Remove Selected Element------------------
    }
});

function get_data(){
    $('.submit_val').on('click', function(){
        var result = [];
        $('.room').each(function(){
            var prnt = $(this).attr('id');
            var data = {};
            if($(this).children().children().length > 0){
                data.id = prnt;

                var shiftArray = [];

                $(this).find('.droppable').each(function(){
                    var shiftId = $(this).attr('id');
                    var shiftObj = {shift_id: shiftId};

                    if($(this).children().length > 0){

                        var childArray = [];
                        $(this).find('.draggable').each(function(){
                            var childId = $(this).attr('id');
                            var childObj = {child_id: childId};
                            childArray.push(childObj);
                        });
                        shiftObj.child = childArray;

                        shiftArray.push(shiftObj);

                    }
                });
                data.shift = shiftArray;

                result.push(data);
            }
        });
        console.log(result);
    });
}
get_data();
相关问题
最新问题