Jquery перетаскиваемая функция множественного результата для клона или оригинала - PullRequest
Новая
       21

Jquery перетаскиваемая функция множественного результата для клона или оригинала

0 голосов
/ 25 марта 2020

Ситуация

У меня есть перетаскиваемая функция, которая имеет три параметра:

  1. щелкните и перетащите -> перетащите в новое место
  2. нажмите CTRL + щелчок и перетащите -> клон в новое место
  3. нажмите и перетащите -> клонировать в новое местоположение

Проблема Для реализации опции 2 и 3 я добавил следующий код: 

    $(this).draggable('option', {
        helper:
            $(this).hasClass('clone') ? 'clone' : 'original' || (e.ctrlKey ? 'clone' : 'original')
    });

Проблема в том, что при нажатии кнопки CTRL и перетаскивании функция клонирования работает, но исходный div и клонированный div плавающий в календаре сейчас. По какой-то причине div больше не остается внутри своего тега

.

Пример кода: 

$(".drag, .clone").mousedown(function(e) {
  $(this).draggable('option', {
    helper: $(this).hasClass('clone') ? 'clone' : 'original' || (e.ctrlKey ? 'clone' : 'original')
  });
}).draggable({
  revert: "invalid",
  start: function(e, ui) {
    if (e.ctrlKey == true && $(this).hasClass("drag")) {
      $(this).data('clone', 'usertask');
      //console.log('DRAG');
    } else if ($(this).hasClass("clone")) {
      $(this).data('clone', 'admintask');
      //console.log('CLONE');
    }
    $(this).data('oldDate', $(this).parent().data('datum1'));
  }
});

//--------------------------------------------------------------------------------------------------//
//  DROP AND SAVE
//--------------------------------------------------------------------------------------------------//
$("td[data-datum1]").droppable({
  drop: function(e, ui) {
    console.log();
    var drag = ui.draggable,
      drop = $(this),
      oldDate = drag.data('oldDate'),
      newDate = drop.data('datum1')
    dragID = drag.attr('id'),
      dropID = drop.attr('id');
    if (drag.data('clone') == 'usertask') {
      $(drag).clone().appendTo(drop);
      var post = true,
        drop = 1;
    } else if (drag.data('clone') == 'admintask') {
      $(drag).clone().appendTo(drop);
      var post = true,
        drop = 2;
    } else if (oldDate != newDate || dragID != dropID) {
      $(drag).detach().css({
        top: 0,
        left: 0
      }).appendTo(drop);
      var post = true,
        drop = 3;
    } else {
      return $(drag).css({
        top: 0,
        left: 0
      });
    }
    /* DISABLED DURING TESTING
    if (post == true) {
        $.ajax({
            type: 'post',
            url: 'kalender.php',
            data: {drop: drop, taskid: drag.data('taskid'), newPnr: dropID, newDatum: newDate},
            success: function(response){
                var result = JSON.parse(response);
                if (result.response == true) {
                    $.growl.notice({title: "", size: "medium", message: "Wijzigingen zijn opgeslagen!"});
                } else {
                    $.growl.error({title: "", size: "medium", message: "Error: Fout bij opslaan!"});
                }
            },
            error: function(data){
                $.growl.error({title: "", size: "medium", message: "Wijzigingen zijn niet opgeslagen!"});
            }
        });
        loadCAL();
    }
    */
  }
});
body {
  background-color: #eeeeee;
}

.cal-container {
  max-width: 900px;
  max-height: 500px;
  overflow: auto;
  margin: auto;
}

.cal-table {
  table-layout: fixed;
  width: 100%;
}

.cal-tbody th {
  padding: 0 !important;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  background: #0087cf;
  color: #fff;
  font-weight: bold;
  border-right: 1px solid #ccc;
  border-bottom: 2px solid #000;
  border-top: 2px solid #000;
}

.cal-tbody td {
  margin: 0;
  height: 66px;
  border: 1px solid #C9C9C9;
  border-top: 3px solid #9A9A9A;
  padding: 0!important;
}

.cal-thead th {
  padding: 0!important;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: #0087cf;
  color: #fff;
  font-weight: bold;
  border: 1px solid #C9C9C9!important;
  background-clip: padding-box;
}

.cal-thead th {
  position: sticky;
  left: 0;
  z-index: 1;
}

.cal-thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background-color: grey;
}

.cal-tbody,
.cal-thead th {
  text-align: center;
  width: 90px;
  min-width: 90px;
  border: 1px solid #ddd;
}

.cal-tbody th:first-child {
  width: 100%;
  z-index: 1;
  background-color: #0087cf;
  padding-left: 5px!important;
  padding-right: 5px!important;
  padding-top: 5px!important;
  border: 2px solid #9A9A9A!important;
  background-clip: padding-box;
}

.cal-tbody td:hover {
  background-color: skyblue;
  content: "\f0fe";
}

.weekend {
  background-color: #B5B5B5;
}

.drag {
  cursor: all-scroll;
}

.clone {
  cursor: all-scroll;
}

.pagination {
  margin-bottom: 0px!important;
}

.cal-monthSize {
  min-width: 140px;
  width: auto;
  text-align: center;
}

.cal-rwd,
.cal-fwd {
  min-width: 70px;
  width: 50%;
  text-align: center;
}

.page-link:hover {
  background-color: #0087cf;
}

.span-info {
  display: inline-block;
  padding: 0.25em 0.4em;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  width: 25px;
  background-color: red;
  cursor: pointer;
}

.span-add:hover {
  content: f0fe;
}

.ui-draggable-dragging {
  z-index: 5!important;
}

.task-badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  text-align: left;
  border-radius: 4px;
  line-height: normal;
  white-space: pre-line;
  width: 85px;
  z-index: 0;
  position: relative;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<div class="container-fluid">

  <div style="background:#fff; height: 100px; margin-bottom: 25px;">
    <div class="card-header" id="opgeslagenTaken" style="background: #042ad4; color: #fff;">
      <a data-toggle="collapse" data-target="#collapseAdmin" aria-expanded="true" aria-controls="collapseAdmin" class="">
        <h5 class="mb-0"><i class="far fa fa-calendar-plus" aria-hidden="false"></i>Add new Tasks</h5>
      </a>
    </div>
    <div id="collapseAdmin" class="collapse show" aria-labelledby="opgeslagenTaken" style="">
      <div class="card-body" style="padding: 0; margin-left: 15px; margin-bottom: 15px;">
        <div id="0" data-taskid="1" draggable="true" style="color:#000000; background-color:#FFB848" class="clone task-badge ui-draggable ui-draggable-handle">06:30 Task A</div>
        <div id="0" data-taskid="2" draggable="true" style="color:#FFFFFF; background-color:#2255A4" class="clone task-badge ui-draggable ui-draggable-handle">15:00 Task B</div>
        <div id="0" data-taskid="3" draggable="true" style="color:#FFFFFF; background-color:#28B779" class="clone task-badge ui-draggable ui-draggable-handle">00:00 Task C</div>
        <div id="0" data-taskid="4" draggable="true" style="color:#000000; background-color:#F8F9FA" class="clone task-badge ui-draggable ui-draggable-handle">00:00 TASK D</div>
        <div id="0" data-taskid="5" draggable="true" style="color:#000000; background-color:#FFB848" class="clone task-badge ui-draggable ui-draggable-handle">07:30 TASK E</div>
        <div id="0" data-taskid="6" draggable="true" style="color:#FFFFFF; background-color:#DA542E" class="clone task-badge ui-draggable ui-draggable-handle">14:00 TASK F</div>
        <div id="0" data-taskid="7" draggable="true" style="color:#FFFFFF; background-color:#007DB9" class="clone task-badge ui-draggable ui-draggable-handle">16:00 TASK G</div>
        <div id="0" data-taskid="8" draggable="true" style="color:#FFFFFF; background-color:#28B779" class="clone task-badge ui-draggable ui-draggable-handle">00:00 TASK H</div>
        <div style="float: right; padding: 15px 15px 15px 15px;">
          <i class="addtask fa fa-plus"></i>
          <i class="trashcan fa fa-trash-alt ui-droppable"></i>
        </div>
      </div>
    </div>
  </div>
  <!-- PLANNING - PLACEHOLDER -->
  <div class="table-responsive">
    <div class="container-fluid">
      <div id="calplaceholder" style="max-height: 500px; margin-bottom: 0;">
        <div class="row">
          <div class="cal-sectionDiv">
            <table class="table table-striped table-bordered">
              <thead class="cal-thead">
                <tr>
                  <th>
                    <div class="page-item disabled"><span class="page-link cal-monthSize">MONTH</span>
                    </div>
                  </th>
                  <th class="weekend">Zo 1</th>
                  <th>Ma 2</th>
                  <th>Di 3</th>
                  <th>Wo 4</th>
                  <th>Do 5</th>
                  <th>Vr 6</th>
                  <th class="weekend">Za 7</th>
                  <th class="weekend">Zo 8</th>
                  <th>Ma 9</th>
                  <th>Di 10</th>
                </tr>
              </thead>
              <tbody class="cal-tbody">
                <tr id="447870921">
                  <th>
                    <div style="text-align:left; overflow: hidden; white-space: nowrap;">User A</div>

                  </th>
                  <td class="weekend ui-droppable" data-datum1="1/3/2020" id="447870921">
                    <div id="447870921" data-taskid="641" style="color:#FFFFFF; background-color:#28B779" class="drag task-badge ui-draggable ui-draggable-handle">00:00 Task D</div>
                    <div id="447870921" data-taskid="5" style="color:#000000; background-color:#FFB848" class="drag task-badge ui-draggable ui-draggable-handle">06:30 Task G</div>
                    <div id="447870921" data-taskid="1996" style="color:#000000; background-color:#FFB848" class="drag task-badge ui-draggable ui-draggable-handle">06:30 Task G</div>
                  </td>
                  <td data-datum1="2/3/2020" id="447870921" class="ui-droppable">
                    <div id="447870921" data-taskid="1997" style="color:#000000; background-color:#FFB848" class="drag task-badge ui-draggable ui-draggable-handle">06:30 Task G</div>
                  </td>
                  <td data-datum1="3/3/2020" id="447870921" class="ui-droppable">
                    <div id="447870921" data-taskid="631" style="color:#FFFFFF; background-color:#28B779" class="drag task-badge ui-draggable ui-draggable-handle">00:00 Task D</div>
                    <div id="447870921" data-taskid="313" style="color:#FFFFFF; background-color:#DA542E" class="drag task-badge ui-draggable ui-draggable-handle">05:00 Task G</div>
                  </td>
                  <td data-datum1="4/3/2020" id="447870921" class="ui-droppable">
                    <div id="447870921" data-taskid="1994" style="color:#000000; background-color:#F5FF2E" class="drag task-badge ui-draggable ui-draggable-handle">06:30 Task G</div>
                    <div id="447870921" data-taskid="1992" style="color:#FFFFFF; background-color:#DA542E" class="drag task-badge ui-draggable ui-draggable-handle">14:00 Task F</div>
                  </td>
                  <td data-datum1="5/3/2020" id="447870921" class="ui-droppable">
                    <div id="447870921" data-taskid="353" style="color:#FFFFFF; background-color:#007DB9" class="drag task-badge ui-draggable ui-draggable-handle">09:00 Task A</div>
                    <div id="447870921" data-taskid="3" style="color:#000000; background-color:#FFB848" class="drag task-badge ui-draggable ui-draggable-handle">15:00 Task Y</div>
                  </td>
                  <td data-datum1="6/3/2020" id="447870921" class="ui-droppable">
                    <div id="447870921" data-taskid="1991" style="color:#FFFFFF; background-color:#A43333" class="drag task-badge ui-draggable ui-draggable-handle">15:00 Task I</div>
                  </td>
                  <td class="weekend ui-droppable" data-datum1="7/3/2020" id="447870921">
                    <div id="447870921" data-taskid="1988" style="color:#FFFFFF; background-color:#28B779" class="drag task-badge ui-draggable ui-draggable-handle">00:00 Task D</div>
                    <div id="447870921" data-taskid="671" style="color:#000000; background-color:#FFB848" class="drag task-badge ui-draggable ui-draggable-handle">17:00 Task A</div>
                  </td>
                  <td class="weekend ui-droppable" data-datum1="8/3/2020" id="447870921">
                    <div id="447870921" data-taskid="393" style="color:#FFFFFF; background-color:#DA542E" class="drag task-badge ui-draggable ui-draggable-handle">13:00 Task F</div>
                    <div id="447870921" data-taskid="1995" style="color:#FFFFFF; background-color:#007DB9" class="drag task-badge ui-draggable ui-draggable-handle">16:00 Task E</div>
                  </td>
                  <td data-datum1="9/3/2020" id="447870921" class="ui-droppable">
                    <div id="447870921" data-taskid="681" style="color:#000000; background-color:#F8F9FA" class="drag task-badge ui-draggable ui-draggable-handle">00:00 Task B</div>
                    <div id="447870921" data-taskid="651" style="color:#000000; background-color:#FFB848" class="drag task-badge ui-draggable ui-draggable-handle">15:00 Task A</div>
                  </td>
                  <td data-datum1="10/3/2020" id="447870921" class="ui-droppable">
                    <div id="447870921" data-taskid="691" style="color:#FFFFFF; background-color:#28B779" class="drag task-badge ui-draggable ui-draggable-handle">00:00 Task C</div>
                  </td>
                </tr>
                <tr id="447870922">
                  <th>
                    <div style="text-align:left; overflow: hidden; white-space: nowrap;">User B</div>
                  </th>
                  <td class="weekend ui-droppable" data-datum1="1/3/2020" id="447870922">
                    <div id="447870922" data-taskid="4" style="color:#1A00B0; background-color:#1BFF2F" class="drag task-badge ui-draggable ui-draggable-handle">15:00 Task A</div>
                    <div id="447870922" data-taskid="432" style="color:#000000; background-color:#FFB848" class="drag task-badge ui-draggable ui-draggable-handle">17:00 Task A</div>
                  </td>
                  <td data-datum1="2/3/2020" id="447870922" class="ui-droppable">
                    <div id="447870922" data-taskid="611" style="color:#FFFFFF; background-color:#DA542E" class="drag task-badge ui-draggable ui-draggable-handle">15:00 Task F</div>
                  </td>
                  <td data-datum1="3/3/2020" id="447870922" class="ui-droppable">
                    <div id="447870922" data-taskid="293" style="color:#FFFFFF; background-color:#2D00B5" class="drag task-badge ui-draggable ui-draggable-handle">03:00 Task P</div>
                  </td>
                  <td data-datum1="4/3/2020" id="447870922" class="ui-droppable">
                    <div id="447870922" data-taskid="303" style="color:#000000; background-color:#E0FAF3" class="drag task-badge ui-draggable ui-draggable-handle">00:00 Task B</div>
                    <div id="447870922" data-taskid="621" style="color:#000000; background-color:#FFB848" class="drag task-badge ui-draggable ui-draggable-handle">12:00 Task A</div>
                  </td>
                  <td data-datum1="5/3/2020" id="447870922" class="ui-droppable">
                    <div id="447870922" data-taskid="601" style="color:#FFFFFF; background-color:#DA542E" class="drag task-badge ui-draggable ui-draggable-handle">10:00 Task L</div>
                  </td>
                  <td data-datum1="6/3/2020" id="447870922" class="ui-droppable">
                    <div id="447870922" data-taskid="661" style="color:#FFFFFF; background-color:#28B779" class="drag task-badge ui-draggable ui-draggable-handle">00:00 Task D</div>
                    <div id="447870922" data-taskid="522" style="color:#000000; background-color:#FFB848" class="drag task-badge ui-draggable ui-draggable-handle">02:00 Task A</div>
                    <div id="447870922" data-taskid="333" style="color:#000000; background-color:#FFB848" class="drag task-badge ui-draggable ui-draggable-handle">07:00 Task A</div>
                  </td>
                  <td class="weekend ui-droppable" data-datum1="7/3/2020" id="447870922">
                    <div id="447870922" data-taskid="492" style="color:#FFFFFF; background-color:#28B779" class="drag task-badge ui-draggable ui-draggable-handle">00:00 Task D</div>
                    <div id="447870922" data-taskid="1986" style="color:#FFFFFF; background-color:#007DB9" class="drag task-badge ui-draggable ui-draggable-handle">16:00 Task E</div>
                  </td>
                  <td class="weekend ui-droppable" data-datum1="8/3/2020" id="447870922">
                    <div id="447870922" data-taskid="502" style="color:#000000; background-color:#FFB848" class="drag task-badge ui-draggable ui-draggable-handle">00:00 Task A</div>
                    <div id="447870922" data-taskid="1987" style="color:#FFFFFF; background-color:#007DB9" class="drag task-badge ui-draggable ui-draggable-handle">16:00 Task E</div>
                  </td>
                  <td data-datum1="9/3/2020" id="447870922" class="ui-droppable">
                    <div id="447870922" data-taskid="512" style="color:#FFFFFF; background-color:#28B779" class="drag task-badge ui-draggable ui-draggable-handle">00:00 Task C</div>
                  </td>
                  <td data-datum1="10/3/2020" id="447870922" class="ui-droppable">
                    <div id="447870922" data-taskid="1985" style="color:#FFFFFF; background-color:#DA542E" class="drag task-badge ui-draggable ui-draggable-handle">14:00 Task F</div>
                    <div id="447870922" data-taskid="1984" style="color:#FFFFFF; background-color:#007DB9" class="drag task-badge ui-draggable ui-draggable-handle">16:00 Task E</div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

1 Ответ

0 голосов
/ 25 марта 2020

После некоторого дополнительного поиска я наткнулся на эту запись

Я заметил, что моя кодировка двух коротких строк была неправильной. Я использовал следующее: 

$(this).hasClass('clone') ? 'clone' : 'original' || (e.ctrlKey ? 'clone' : 'original')

После некоторого тестирования заметил, что следующий код работает правильно, надеюсь, он кому-нибудь поможет: 

$(this).hasClass('clone') ? 'clone' : (e.ctrlKey ? 'clone' : 'original')
...