Сбросить перетаскиваемые элементы в исходное положение

Мне нужна кнопка для сброса положения перетаскиваемых элементов до исходного положения в следующей скрипте. поиграйте здесь https://jsfiddle.net/adgram/714w6x3t/20/

$(document).ready(function() {
  $('.event').on("dragstart", function(event) {
    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'));
      if ($(this).find('span').length === 0) {
        de = $('#' + data).detach();
        de.appendTo($(this));
        //alert("ok"); //mine 
        document.getElementById("done").innerHTML = data + " moved!";
      }

    };
  });
})

table th,
table td {
  height: 30px;
  width: 200px;
}

table span {
  display: block;
  background-color: #09C;
  height: 100%;
  width: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv = "content-type" content = "text/html; charset=UTF-8">
  <title></title>
  <meta http-equiv = "content-type" content = "text/html; charset=UTF-8">
  <meta name = "robots" content = "noindex, nofollow">
  <meta name = "googlebot" content = "noindex, nofollow">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <script type = "text/javascript" src = "//code.jquery.com/jquery-3.7.1.js"></script>
</head>

<body>
  <div>
    <div id = "done" style = " text-align: center;color:red;"></div>
    <table id = "#our_table" border = "1">
      <tr>
        <th>Jun 1</th>
        <th>Jun 2</th>
        <th>Jun 3</th>
        <th>Jun 4</th>
        <th>Jun 5</th>
      </tr>
      <tr>
        <td><span class = "event" id = "a" draggable = "true">aaa</span></td>
        <td><span class = "event" id = "b" draggable = "true">bbb</span></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td><span class = "event" id = "c" draggable = "true">ccc</span></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td><span class = "event" id = "d" draggable = "true">dddd</span></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td><span class = "event" id = "e" draggable = "true">eeee</span></td>
        <td></td>
        <td></td>
        <td></td>
        <td><span class = "event" id = "f" draggable = "true">ffff</span></td>
      </tr>
      <tr>
        <td><span class = "event" id = "g" draggable = "true">gggg</span></td>
        <td></td>
        <td></td>
        <td><span class = "event" id = "h" draggable = "true">hhhh</span></td>
        <td></td>
      </tr>




    </table>

  </div>
  <input class = "resetall" type = "submit" id = "reset" value = "reset">
  original https://jsfiddle.net/videma/2RuBh/



</body>

</html>

поиграйте здесь https://jsfiddle.net/adgram/714w6x3t/20/ Если параметр перетаскивание имеет значение true, ячейка может перемещаться. Я попробовал, должно ли перетаскивание вернуться, но не работает. кто-нибудь может помочь, мне не нужно сбрасывать все элементы. Поскольку моя программа, когда я делаю первый сброс, запускает код, мне нужен только первый шаг для сброса.

Я попробовал getBoundingClientRect(); Я не думаю, что это правильно, даже после перезагрузки пролет больше не движется. Пожалуйста, посмотрите jsfiddle.net/adgram/714w6x3t/106

— 23.08.2024 21:11

Я бы сказал, что вам нужно сохранить историю или, в вашем случае, начальные позиции для каждого перетаскиваемого объекта, потому что в начальной позиции того, который вы хотите сбросить, уже может быть другой перетаскиваемый объект, который вы также должны сбросить тогда. ?

— 23.08.2024 21:48

javascript jquery css

23.08.2024 15:06

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Когда вы перетаскиваете, вы меняете не положение, а структуру HTML. Так что сохраните html и восстановите его самостоятельно. Что-то вроде этого:

$(document).ready(function () {
  const originTable = $('#our_table').html();
  $(document).on('dragstart', '.event', function (event) {
    var dt = event.originalEvent.dataTransfer;
    dt.setData('Text', $(this).attr('id'));
  });
  $(document).on('dragenter dragover drop', '#our_table td', function (event) {
    event.preventDefault();
    if (event.type === 'drop') {
      var data = event.originalEvent.dataTransfer.getData(
        'Text',
        $(this).attr('id'),
      );
      if ($(this).find('span').length === 0) {
        de = $('#' + data).detach();
        de.appendTo($(this));
        //alert("ok"); //mine
        document.getElementById('done').innerHTML = data + ' moved!';
      }
    }
  });

  $(document).on('click', '.restore', function () {
    $('#our_table').html(originTable);
  });
});

table th,
table td {
  height: 30px;
  width: 200px;
  border: solid 1px;
}
table span {
  display:block;
  background-color: #09C;
  height: 100%;
  width: 100%;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<button class = "restore">Restore</button>
<div
  id = "done"
  style = "text-align: center; color: red"
></div>
<table
  id = "our_table"
>
  <tr>
    <th>Jun 1</th>
    <th>Jun 2</th>
    <th>Jun 3</th>
    <th>Jun 4</th>
    <th>Jun 5</th>
  </tr>
  <tr>
    <td>
      <span
        class = "event"
        id = "a"
        draggable = "true"
        >aaa</span
      >
    </td>
    <td>
      <span
        class = "event"
        id = "b"
        draggable = "true"
        >bbb</span
      >
    </td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>
      <span
        class = "event"
        id = "c"
        draggable = "true"
        >ccc</span
      >
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>
      <span
        class = "event"
        id = "d"
        draggable = "true"
        >dddd</span
      >
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>
      <span
        class = "event"
        id = "e"
        draggable = "true"
        >eeee</span
      >
    </td>
    <td></td>
    <td></td>
    <td></td>
    <td>
      <span
        class = "event"
        id = "f"
        draggable = "true"
        >ffff</span
      >
    </td>
  </tr>
  <tr>
    <td>
      <span
        class = "event"
        id = "g"
        draggable = "true"
        >gggg</span
      >
    </td>
    <td></td>
    <td></td>
    <td>
      <span
        class = "event"
        id = "h"
        draggable = "true"
        >hhhh</span
      >
    </td>
    <td></td>
  </tr>
</table>

23.08.2024 21:45

Другие вопросы по теме

Как изменить атрибут aria с помощью Jquery?

Как отобразить данные в таблице данных jQuery в ASP.NET Core MVC при событии нажатия кнопки

Меню фильтра не работает с jQuery DataTable

Как добавить собственный класс CSS в навигационное меню WooCommerce MyAccount?

Множественный выбор с использованием select2 в Livewire 3

Как отфильтровать столбец в таблице данных jQuery

Таблица данных JQuery – сортировка столбцов не работает в

CSS и JavaScript не применяются правильно после переноса содержимого HTML в компонент приложения Angular из-за проблем с инкапсуляцией просмотра и порядком загрузки скриптов

Невозможно сделать столбец закрепленным в таблице

Как я могу скопировать идентификатор из div в идентификатор CSS?

Сбросить перетаскиваемые элементы в исходное положение

Ответы 1

Другие вопросы по теме

Похожие вопросы