jQuery用户界面 - 拖放

添加jQuery代码，使两个员工的任务列表可放置区域。发生拖放事件时，可拖动的应添加到员工的其他任务的末尾。由于可拖动的位置在拖动时发生更改，因此您还需要将可拖动的顶部和左侧属性设置为零，以便它出现在可拖动的正确位置。

我有一个问题，正确地获取Web应用程序使用拖放。我不知道我需要做什么，因为我的教练从来没有真正帮助我们使用jQuery UI。我是否需要通过ID或类似方式使用获取元素？我真的很为此苦苦挣扎。jQuery用户界面 - 拖放

HTML & jQuery代码

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Task Management</title> 
    <link rel="stylesheet" href="jquery-ui-1.11.4.custom/jquery-ui.min.css"> 
    <link rel="stylesheet" href="main.css"> 
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> 
    <script src="jquery-ui-1.11.4.custom/jquery-ui.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      $(".ui-state-default").draggable({cursor: "move", 
               grid: [25, 34]}); 
      $("#employee1, #employee2").droppable({ 
       drop: function(evt, ui) { 
        $(".ui-state-default").html(ui.draggable.children()).appendTo(this); 
       } 
      }); 
     }); 
    </script> 
</head> 

<body> 
    <main> 
     <h2>Task List by Employee</h2> 
     <div id="left"> 
      <h3>Kelly</h3> 
      <div id="employee1"> 
       <div class="ui-state-default"><p>Manage office personnel</p></div> 
       <div class="ui-state-default"><p>Process payables</p></div>       
       <div class="ui-state-default"><p>Process payroll</p></div>     
      </div> 
      <input type="button" id="add1" value="Add Task"> 
     </div> 
     <div id="right"> 
      <h3>Juliette</h3> 
      <div id="employee2" class="connectedSortable"> 
       <div class="ui-state-default"><p>Enter orders</p></div>      
       <div class="ui-state-default"><p>Process invoices</p></div>  
      </div> 
      <input type="button" id="add2" value="Add Task"> 
     </div>  
    </main> 
</body> 
</html>

来源

2017-04-17 Samantha Cook

你应该添加一个http://jsfiddle.net – Neil

我不能让jsfiddle正常工作与jquery UI –

这是一个快速的小提琴，与jQuery UI（添加到外部资源）：https： //jsfiddle.net/Twisty/fx2jjcbq/ – Twisty

你可以把任务分成3个步骤：

加入jQuery代码，使任务列表对雇员可投放区域。
发生拖放事件时，应将可拖动的内容添加到该员工的其他任务的末尾。
由于可拖动的位置在被拖动时发生变化，因此您还需要将可拖动的顶部和左侧属性设置为零，以便它出现在可放置的正确位置。

它的措辞让你失望，也是为了挑战学生思考问题。

工作液：https://jsfiddle.net/Twisty/fx2jjcbq/3/

HTML

<main> 
    <h2>Task List by Employee</h2> 
    <div id="left"> 
    <h3>Kelly</h3> 
    <div id="employee1" class="taskList"> 
     <div class="ui-state-default"> 
     <p>Manage office personnel</p> 
     </div> 
     <div class="ui-state-default"> 
     <p>Process payables</p> 
     </div> 
     <div class="ui-state-default"> 
     <p>Process payroll</p> 
     </div> 
    </div> 
    <input type="button" id="add1" value="Add Task"> 
    </div> 
    <div id="right"> 
    <h3>Juliette</h3> 
    <div id="employee2" class="taskList"> 
     <div class="ui-state-default"> 
     <p>Enter orders</p> 
     </div> 
     <div class="ui-state-default"> 
     <p>Process invoices</p> 
     </div> 
    </div> 
    <input type="button" id="add2" value="Add Task"> 
    </div> 
</main>

的JavaScript

$(document).ready(function() { 
    $(".ui-state-default").draggable({ 
    cursor: "move", 
    grid: [25, 34] 
    }); 

    $(".taskList").droppable({ 
    drop: function(evt, ui) { 
     ui.draggable.css({ 
     top: 0, 
     left: 0 
     }); 
     $(this).append(ui.draggable); 
    } 
    }); 
});

你可以看到我已经添加taskList为一类到包含列表中的每个div的任务。这只是简化了选择这两个列表。现在我可以用.droppable()同一代码块都初始化，完成步骤1

在drop回调函数，我们需要使用.append()，默认情况下，这将增加的元素作为最后一个子元素。

描述：插入内容，由参数指定的，所述集合中匹配的元素中的每个元素的结束。

这解决了步骤2。

对于最后一步，我们希望使用.css()将top和left重置为0。它有一个GET和SET方法。我们将使用set方法。

描述：为一组匹配的元素设置一个或多个CSS属性。

我们希望在将它追加到列表之前这样做。大多数人会在尝试完成之后做到这一点，但在我看来，之前这样做更有意义。

还有另一种方法。正如在任务中提到的那样，拖动元素会更改元素的top和left。这是通过style属性完成的。你可以像上面一样有效地做到这一点：

ui.draggable.attr("style", "");

希望能让你的班级更加清晰，好运。

来源

2017-04-18 22:19:13 Twisty

jQuery用户界面 - 拖放

回答

相关问题