在express框架中的node js + ejs中拖放卡片

【问题标题】：Drag and Drop cards in nodejs + ejs+ express framework在express框架中的node js + ejs中拖放卡片
【发布时间】：2015-04-25 19:11:33
【问题描述】：

我正在创建一个类似于 LeanKit 的 Kanbanize 应用程序的应用程序。 LeanKit 这是我的 HTML 代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
 <!DOCTYPE html>
 <html lang="en">
  <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sign In</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/mycss.css" rel="stylesheet">

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script      src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/js/bootstrap.min.js"></script>
 </head>
  <script>
     var onDragEnter = function(event) {
        event.preventDefault();
        $("#dropzone").addClass("dragover");
    }, 
    onDragOver = function(event) {
        event.preventDefault(); 
       if(!$("#dropzone").hasClass("dragover"))
        $("#dropzone").addClass("dragover");
   }, 
onDragLeave = function(event) {
    event.preventDefault();
    $("#dropzone").removeClass("dragover");
},

onDrop = function(event) {
    event.preventDefault();
    $("#dropzone").removeClass("dragover");
    console.log(event.originalEvent.dataTransfer.files);
};

$("#dropzone")
.on("dragenter", onDragEnter)
.on("dragover", onDragOver)
.on("dragleave", onDragLeave)
.on("drop", onDrop);
 </script>
 <body style="margin:0; background-color: #F2F2F2;">
   <!--Header--> 
    <div id = "header">
   <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Welcome to Kanban View</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav navbar-right">
      <li><a href="#" data-toggle="modal" data-target="#myModal" data-whatever="Delivery Hours">Add Card</a></li>
      <li><a href="KanbanprojectStatus">Project Status</a></li>
      </ul>
    </div><!--/.nav-collapse -->
    </div>
   </div>
 </div>
  <div class="container" style="width:900px; height:500px;padding-top:70px;">
    <div class="row">
         <div class="col-md-3">
            <h4>Ready to Start</h4>
            <ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice  laneContents connectedSortable  ui-sortable" cmenu="menu_LaneBody"> 
                <div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card  cmVoice  {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
                      <div class="card-background" style="background-color:#FDD29A;">
                           <div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>                                                 
                              <div class="card-header" style="background-color:rgb(196,140,67)">
                                  <div class="cardtext elipses" title="test1">Test 1</div>
                              </div>
                           </div>     
                 </li>
                 </div>

                  <div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card  cmVoice  {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
                      <div class="card-background" style="background-color:#FDD29A;">
                           <div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>                                                 
                              <div class="card-header" style="background-color:rgb(196,140,67)">
                                  <div class="cardtext elipses" title="test2">Test 2</div>
                              </div> 
                           </div> 
                 </li>
                 </div>

                 <div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card  cmVoice  {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
                      <div class="card-background" style="background-color:#FDD29A;">
                           <div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>                                                 
                              <div class="card-header" style="background-color:rgb(196,140,67)">
                                  <div class="cardtext elipses" title="test3">Test 3</div>
                              </div>  
                           </div>   
                 </li>
                 </div>

                  <div draggable="true"><li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card  cmVoice  {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
                      <div class="card-background" style="background-color:#FDD29A;">
                           <div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>                                                 
                              <div class="card-header" style="background-color:rgb(196,140,67)">
                                  <div class="cardtext elipses" title="test4">Test 4</div>
                              </div>
                           </div>     
                 </li>
                 </div>
             </ul>
        </div>

        <div class = "col-md-3">
        <h4>In Progress</h4>
         <div id='dropzone'><ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice  laneContents connectedSortable  ui-sortable" cmenu="menu_LaneBody"> 
                <li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card  cmVoice  {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
                      <div class="card-background" style="background-color:#FDD29A;">
                           <div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>                                                 
                              <div class="card-header" style="background-color:rgb(196,140,67)">
                                  <div class="cardtext elipses" title="Attach a Report!">Search Results Page</div>
                              </div>  
                           </div>
                 </li>
        </div>  </div>

        <div class = "col-md-3">
        <h4>Ready for Review</h4>
        <ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice  laneContents connectedSortable  ui-sortable" cmenu="menu_LaneBody"> 
                 <li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card  cmVoice  {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
                      <div class="card-background" style="background-color:#FDD29A;">
                           <div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>                                                 
                              <div class="card-header" style="background-color:rgb(196,140,67)">
                                  <div class="cardtext elipses" title="Attach a Report!">Welcome Page</div>
                              </div>  
                           </div>
                 </li>
             </ul>
        </div>

        <div class = "col-md-3">
        <h4>Recently Finished</h4>
        <ul title="Ready to Start" id="lane_192025152_contents" laneid="192025152" style="height: 512px; -webkit-user-select: none;" class="cmVoice  laneContents connectedSortable  ui-sortable" cmenu="menu_LaneBody"> 
                 <li id="card_192025057" title="Risk / Issue: Q1 Sales Metrics" class="card  cmVoice  {cMenu:'menu_Card'}" cmenu="menu_Card" style="-webkit-user-select: none; cursor: default;">
                      <div class="card-background" style="background-color:#FDD29A;">
                           <div class="little-arrow rootVoice {menu:'menu_Card'} clicked" menu="menu_Card" clicked="clicked" style="white-space: nowrap;"></div>                                                 
                              <div class="card-header" style="background-color:rgb(196,140,67)">
                                  <div class="cardtext elipses" title="Attach a Report!">Login Functionality</div>
                              </div>  
                           </div>
                 </li>
             </ul></div>
        </div>
</div>
  <!--Footer--> 
   <div id="footer">
   <div class="navbar navbar-default navbar-fixed-bottom">
      <div class="container">
      </div> <!-- container-->
  </div> <!-- navbar navbar-default navbar-fixed-bottom" -->
 </div>
 </body>
 </html>

我根据this 问题添加了拖放代码。我可以看到卡片正在拖动，但不能放到进行中部分。功能是我应该能够根据卡片的数量将卡片从任何地方拖放到 4 个部分中的任何一个，每个部分都应该是响应式的，以便它们可以适应新卡片。任何建议将不胜感激。非常感谢。

【问题讨论】：

    标签： node.js express drag-and-drop ejs


    【解决方案1】：

    您需要实际移动 DOM 元素。这是您可以做到的一种方法：

    https://jsfiddle.net/z3o28qut/

    var dragItem;

// You should make this selector more specific to your card elements
$("div")
    .on("dragstart", function(event) {
        dragItem = $(event.currentTarget).find('li') && $(event.currentTarget).find('li')[0];
    });

onDrop = function(event) {
    event.preventDefault();
    $("#dropzone").removeClass("dragover");

    var ul = $(this).find('ul')[0];
    if (dragItem) {
        ul.appendChild(dragItem);
    }
};

    【讨论】：

    • 能否请您详细说明我应该如何使这个特定于我的卡片元素？谢谢
    • 我的建议是将dragstart 事件附加到所有div 元素，这可能不是您想要的。您应该定义一个所有可拖动卡片元素共有的类，例如&lt;div class='task-card'&gt;&lt;/div&gt;。然后你只能像这样监听它们的 dragstart 事件：$('.task-card').on('dragstart', ...)
    猜你喜欢
    • 2018-08-28
    • 2014-10-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-10-11
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode