jQuery UI-拖放

Question

Add jQuery code that makes the task lists for both employees droppable areas. 添加jQuery代码，使两个员工的任务列表都处于可放置区域。 When the drop event occurs, the draggable should be added to the end of the other tasks for the employee. 发生放置事件时，应将可拖动对象添加到该雇员的其他任务的末尾。 Because the position of the draggable changes as it's dragged, you'll also need to set the top and left properties of the draggable to zero so it appears in the correct location within the droppable. 由于可拖动对象的位置在被拖动时会发生变化，因此您还需要将可拖动对象的top和left属性设置为零，以便它在可放置对象中的正确位置显示。

I'm having an issue properly getting the web application to use drag and drop. 我在正确地使Web应用程序使用拖放时遇到问题。 I have no idea what I need to be doing, as my instructor never really gave us any help with using the jQuery UI. 我不知道该做什么，因为我的讲师从未真正给我们使用jQuery UI的任何帮助。 Do I need do use get elements by ID or anything like that? 我是否需要按ID或类似方式使用get元素？ I'm really struggling with this. 我真的为此感到挣扎。

HTML & JQUERY CODE 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>

Answer 1

You can break the task into 3 steps: 您可以将任务分为3个步骤：

Add jQuery code that makes the task lists for both employees droppable areas. 添加jQuery代码，使两个员工的任务列表都处于可放置区域。
When the drop event occurs, the draggable should be added to the end of the other tasks for the employee. 发生放置事件时，应将可拖动对象添加到该雇员的其他任务的末尾。
Because the position of the draggable changes as it's dragged, you'll also need to set the top and left properties of the draggable to zero so it appears in the correct location within the droppable. 由于可拖动对象的位置在被拖动时会发生变化，因此您还需要将可拖动对象的top和left属性设置为零，以便它在可放置对象中的正确位置显示。

It worded in a way to throw you off and also to challenge students to think around the problem. 它的措辞不仅使您脱颖而出，还挑战学生思考问题。

Working Solution: https://jsfiddle.net/Twisty/fx2jjcbq/3/ 工作解决方案： https : //jsfiddle.net/Twisty/fx2jjcbq/3/

HTML 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 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);
    }
  });
});

You can see I've added taskList as a class to each div that contains a list of tasks. 您可以看到我已将taskList作为类添加到每个包含任务列表的div中。 This simply makes it easier to select the two lists. 这只是使选择两个列表变得更加容易。 Now I can initialize both with the same block of .droppable() code, fulfilling step 1. 现在，我可以使用相同的.droppable()代码块来初始化两者，完成步骤1。

In the drop callback function, we need to use .append() , By default, this will add the element as the last child element. 在drop callback函数中，我们需要使用.append() ，默认情况下，这会将元素添加为最后一个子元素。

Description: Insert content, specified by the parameter, to the end of each element in the set of matched elements. 说明：将参数指定的内容插入到匹配元素集中每个元素的末尾。

This addresses step 2. 这解决了步骤2。

For the final step, we want to use .css() to reset the top and left back to 0 . 对于最后一步，我们要使用.css()重置top和left回0 。 It has both a GET and SET method. 它同时具有GET和SET方法。 We will use the set method. 我们将使用set方法。

Description: Set one or more CSS properties for the set of matched elements. 说明：为匹配的元素集设置一个或多个CSS属性。

We want to do this before we append it to the list. 我们要先执行此操作，然后再将其添加到列表中。 Most will try to do it after, and that can be done, yet in my mind, it makes more sense to do this before. 大多数人会在之后尝试这样做，但是可以做到，但是在我看来，在此之前这样做更有意义。

There is also another method. 还有另一种方法。 As was mentioned in the task, dragging an element changes the top and left of the element. 如任务中所述，拖动元素会更改元素的top和left 。 This is done through the style attribute. 这是通过style属性完成的。 You can effectively do the same as above with: 您可以使用以下方法有效地完成上述操作：

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

Hope that makes it more clear and good luck with your class. 希望这能使您的课堂更加清晰，万事如意。

jQuery UI-拖放

问题描述

1 个解决方案

解决方案1
0 2017-04-18 22:19:13

jQuery UI-拖放

问题描述

1 个解决方案

解决方案1 0 2017-04-18 22:19:13

解决方案1
0 2017-04-18 22:19:13