0

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

$(function() {

  var newTasks = [];

  // Создания ТАССКОВ

  function addTaskToDOM(task, progress) {
    var blocks = $('<div class="blocks"></div>')
    var newSpan = $('<span>x</span>').addClass('exit');
    var newTitle = $('<h1 id="newTitle"></h1>').text(task);
    var newButton = $('<button>').addClass('newBtn').text('In Progress >>>');

    blocks.append(newSpan, newTitle, newButton);

    $('.task-' + progress).append(blocks);


  };

  // Сохранение в LOCALSTORAGE

  function saveTaskToLocal(arr, task, localKey) {
    arr.push(task);

    var arrStr = JSON.stringify(arr);

    localStorage.setItem(localKey, arrStr);
  };

  // Получение Элементов от LocalStorage
  function getTasksFromLocalstorage(arr, progress, localKey) {
    arr = JSON.parse(localStorage.getItem(localKey)) || [];

    for (var i = 0; i < arr.length; i++) {
      addTaskToDOM(arr[1], progress);
    }
  }



  // Действие на кнопку Add
  $('form').on('submit', function(event) {
    event.preventDefault();

    var task = $('#taskName').val();

    addTaskToDOM(task, 'new');

    saveTaskToLocal(newTasks, task, 'new');


  });


  getTasksFromLocalstorage(newTasks, 'new', 'new');



  // Progress

});
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  /* background: url(../img/gif.gif) */
}

.wrapper {
  margin: 0 auto;
  max-width: 1000px;
  min-height: 100vh;
}

.header {
  padding: .5rem;
  background: #ccc;
}

.add-task {
  display: flex;
}

.task-name {
  flex-grow: 1;
  padding: .5rem;
}

.btn-add {
  padding: .5rem 2rem;
  border: none;
  background: #333;
  color: #fff;
  cursor: pointer;
}

.task-list {
  padding: 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 2rem;
  background: #f2f2f2;
}

.task-body {
  padding: .5rem;
  border: 1px solid #999;
  background: #fff;
  min-height: 300px;
}

.newBtn {
  cursor: pointer;
  padding: 10px 20px;
  margin-left: 50%;
  transform: translateX(-50%);
  background: green;
  box-shadow: 2px 2px 1px black;
}

.exit {
  cursor: pointer;
  font-size: 40px;
  float: right;
  margin-right: 10px;
  font-weight: 800;
}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>


  <div class="wrapper">
    <header class="header">
      <form class="add-task">
        <input type="text" class="task-name" id="taskName" placeholder="Enter task name" required>
        <button type="submit" class="btn-add">Add</button>
      </form>
    </header>

    <div class="task-list">
      <div class="task-item">
        <h3 class="task-title">To DO</h3>
        <div class="task-body task-new"></div>
      </div>
      <div class="task-item">
        <h3 class="task-title">In progress</h3>
        <div class="task-body task-progress"></div>
      </div>
      <div class="task-item">
        <h3 class="task-title">Done</h3>
        <div class="task-body task-done"></div>
      </div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="./js/script.js"></script>
</body>

</html>

1
  • Что скопировать, куда скопировать, когда скопировать, что значит скопировать? Ну и с localStorage приведённый Вами пример здесь в "песочнице" работать не будет, т.к. Failed to read the 'localStorage' property from 'Window': The document is sandboxed and lacks the 'allow-same-origin' flag., т.е. домен "песочницы" отличается от текущего. Помимо это постарайтесь в Вашем примере удалить всё, что не относится к задаче. Иначе количество желающих в нём разобраться будет стремиться к нулю.
    – XelaNimed
    7 фев 2019 в 19:01

1 ответ 1

0

$(function() {
        var newTasks = [];
        const $taskList = $(".task-list");
        const $tasksInProgress = $(".task-progress");

        // Создания ТАССКОВ

        function addTaskToDOM(task, progress) {
          var blocks = $('<div class="blocks"></div>');
          var newSpan = $("<span>x</span>").addClass("exit");
          var newTitle = $('<h1 id="newTitle"></h1>').text(task);
          var newButton = $("<button>")
            .addClass("newBtn")
            .text("In Progress >>>");

          blocks.append(newSpan, newTitle, newButton);

          $(".task-" + progress).append(blocks);
        }

        // Сохранение в LOCALSTORAGE

        function saveTaskToLocal(arr, task, localKey) {
          arr.push(task);

          var arrStr = JSON.stringify(arr);

          localStorage.setItem(localKey, arrStr);
        }

        // Получение Элементов от LocalStorage
        function getTasksFromLocalstorage(arr, progress, localKey) {
          arr = JSON.parse(localStorage.getItem(localKey)) || [];

          for (var i = 0; i < arr.length; i++) {
            addTaskToDOM(arr[1], progress);
          }
        }

        // Действие на кнопку Add
        $("form").on("submit", function(event) {
          event.preventDefault();

          var task = $("#taskName").val();

          addTaskToDOM(task, "new");

          saveTaskToLocal(newTasks, task, "new");
        });

        getTasksFromLocalstorage(newTasks, "new", "new");

        // Progress

        $taskList.on("click", ".newBtn", function() {
          const $blocks = $(this).parents(".blocks");
          $tasksInProgress.append($blocks);
        });
      });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Добавил что бы по нажатию на кнопку In progress блок перемещался в таски in progress

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.