Блог

Главная - Вопросы по программированию - Как заставить код Javascript перетаскивания применяться к каждому отдельному элементу задачи, делая каждый элемент списка перетаскиваемым, а не элементами, объединенными в блок?

Как заставить код Javascript перетаскивания применяться к каждому отдельному элементу задачи, делая каждый элемент списка перетаскиваемым, а не элементами, объединенными в блок?

#javascript #html #jquery #list #drag-and-drop

Вопрос:

Мой код перетаскивания не применяется к каждому новому добавленному элементу списка в отдельности, а применяется ко всем элементам списка в одном блоке. Однако цель перетаскивания состоит в том, чтобы сделать элементы списка индивидуально сортируемыми и перетаскиваемыми. Есть какие-нибудь подсказки о том, как исправить код для применения к каждому новому элементу задачи/списка, добавленному в список «Сделать»?

   var $addButton = $(".btn-primary");
  var $removeButton = $(".btn-danger");
  var $todoList = $(".uncomplete");
  var $doneList = $(".completed");

//Take Text Input and Add <li> to To Do List
 $addButton.on("click", function(){
  
  //Creating object Variables 
  var $sort = $(".sort").val();
  var $newTask = $(".newTask").val();
  var $taskDescr = $(".taskDescr").val();
  var $taskDate = $(".taskDate").val();
 // var $category= $(".category").val();
  var $category= $("input[type='radio'][name='category']:checked").val();
  //var $importance = $("input[type='checkbox'][name='importance']:checked").val();
  var $importance = $('<input type="checkbox" name="importance"/>').val();
  var $newTaskString = $sort   ", "   $taskDescr   ", "   $newTask   ", "   $taskDate   ", "   $category   ", "   $importance   "  "; 
  var $todoList = $(".uncompleted");
  
   //call append method on $todoList
   
  $todoList.append("<li>"   $newTaskString   "<button><span> Done</span></button><button><span> Remove</span></button></li>").addClass("todo");
  
//drag and drop array 
function allowDrop(e)
{
    console.log("allow drop");
    e.preventDefault();
}

function drop(e)
{
    console.log("drop");
    e.preventDefault();
    var data = e.dataTransfer.getData("text");
    e.target.appendChild(document.querySelector("#"   data));
}

function drag(e)
{
    console.log("dragging");
   //e.preventDefault();
    e.dataTransfer.setData("text", e.target.id);
}

function showAllUsers(){
    let allUsersDiv=document.querySelector("#allUsersDiv");

    for(var i=0; i < allUsers.length; i  )
    {
    var newUserDiv=document.createElement("DIV");

        newUserDiv.setAttribute("draggable", "true");
        newUserDiv.setAttribute("ondragstart", "drag(event)"); //"editUser(this)"
        newUserDiv.setAttribute("id", ("userdiv-"   i));

        newUserDiv.setAttribute("style", "border:1px solid red;");

        var newUserEditLink = document.createElement("A");
        newUSerEditLink.setAttribute("href", "#");
        newUSerEditLink.setAttribute("onclick", "editUSer(this)");
        newUserEditLink.innerHTML = "Edit";

        newUserEditLink.setAttribute("id", ("edit-",   i));

        newUserDiv.innerHTML=allUsers[i].username;
        newUserDiv.appendChild(nowUserEditLink);

        allUsersDiv.appendChild(newUserDiv);
}
} 
   <div class="list-wrap" contenteditable="false"> 
  <div class="list-inner-wrap">
  <h2 class="title">ToDo List</h2>
  <h3 class="title">Add Task</h2>
  <!--<h4>Task Name</h4>-->
  
  <label for="sort">Sort Order:</label><input type="text" class="sort" 
   name="sort" id="sort" value="" placeholder="A,B,C,etc.">
  <br> </div></div>

   <button class="btn btn-primary">
 <span class="glyphicon glyphicon-plus"> Add</span>
 </button>

   <h3 class="title">To Do</h2>
        <h6><i>Click task item to edit or modify</i></h6>

        <!--Change color of editable task -->
        <div id='div' contenteditable='false' oninput='change()'>

        <div id="allUsersDiv" ondragover="allowDrop(event)" ondrop="drop(event)" style="position:absolute;left:5px;top:450px;height:200px;width:500px; border: 1px solid black">
        <div draggable="true" ondragstart="drag(event)">
   

      <ul class="uncompleted" contenteditable="false" id="id01" >
        <li>Need to be completed task 
        <button class="btn btn-success">
        <span class="glyphicon glyphicon-ok"> Done</span>
          </button>

          <button class="btn btn-danger">
          <span class="glyphicon glyphicon-remove"> Remove</span></button>

          <br>
        
        </li></ul>
        </div></div></div>
Метки: , , ,