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用戶界面 - 拖放

回答

相關問題