Как перенести готовый блок от одной ячейки к другой jQuery

185

24 сентября 2019, 04:50

У меня такой вопрос: Есть верстка и стили и блок созданный на 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>

Answer 1

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

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Js bind “своими руками”

В целом нужно было создать свой bind, который будет иметь тот же функционал, что и встроенный bind (нельзя использовать call, apply)Вот как это сделал...

147

javascript