jquery - 如何使用 jquery 添加拖放 div？-6ren

jquery - 如何使用 jquery 添加拖放 div？

转载作者：行者123 更新时间：2023-12-01 08:34:40

25

4

我想制作像看板模板一样的 html 页面。 html 页面中有 Todo、Doing 和 Done 列列表。用户可以将 div 移动到该列表下的另一个列列表。但我无法使用 jquery 拖放 div 组件。 javascript代码有问题还是其他什么问题？如果给出一个想法，我会非常高兴。预先感谢您..

$(function() {
  var kanbanCol = $('.panel-body');
  kanbanCol.css('max-height', (window.innerHeight - 150) + 'px');
  var kanbanColCount = parseInt(kanbanCol.length);
  $('.container-fluid').css('min-width', (kanbanColCount * 350) + 'px');

  draggableInit();

  $('.panel-heading').click(function() {
    var $panelBody = $(this).parent().children('.panel-body');
    $panelBody.slideToggle();
  });
});

function draggableInit() {
  var sourceId;
  $('[draggable=true]').bind('dragstart', function(event) {
    sourceId = $(this).parent().attr('id');
    event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id'));
  });

  $('.panel-body').bind('dragover', function(event) {
    event.preventDefault();
  });

  $('.panel-body').bind('drop', function(event) {
    var children = $(this).children();
    var targetId = children.attr('id');

    if (sourceId != targetId) {
      var elementId = event.originalEvent.dataTransfer.getData("text/plain");

      $('#processing-modal').modal('toggle'); //before post

      // Post data 
      setTimeout(function() {
        var element = document.getElementById(elementId);
        children.prepend(element);
        $('#processing-modal').modal('toggle'); // after post
      }, 1000);
    }

    event.preventDefault();
  });

<div class="container-fluid">
  <div id="sortableKanbanBoards" class="row">
    <div class="panel panel-primary kanban-col">
      <div class="panel-heading">
        TODO
        <i class="fa fa-2x fa-plus-circle pull-right"></i>
      </div>
      <div class="panel-body">
        <div id="TODO" class="kanban-centered">
          <article class="kanban-entry grab" id="item1" draggable="true">
            <div class="kanban-entry-inner">
              <div class="kanban-label">
                <h2><a href="#">Art Ramadani 1</a></h2>
                <p>Tolerably earnestly middleton extremely distrusts she boy now not.</p>
              </div>
            </div>
          </article>
        </div>
      </div>
    </div>
    <div class="panel panel-primary kanban-col">
      <div class="panel-heading">
        DOING
        <i class="fa fa-2x fa-plus-circle pull-right"></i>
      </div>
      <div class="panel-body">
        <div id="DOING" class="kanban-centered">
          <article class="kanban-entry grab" id="item2" draggable="true">
            <div class="kanban-entry-inner">
              <div class="kanban-label">
                <h2><a href="#">Art Ramadani 2</a></h2>
                <p>Tolerably earnestly middleton extremely distrusts she boy now not.</p>
              </div>
            </div>
          </article>
        </div>
      </div>
    </div>
    <div class="panel panel-primary kanban-col">
      <div class="panel-heading">
        DONE
        <i class="fa fa-2x fa-plus-circle pull-right"></i>
      </div>
      <div class="panel-body">
        <div id="DONE" class="kanban-centered">
          <article class="kanban-entry grab" id="item3" draggable="true">
            <div class="kanban-entry-inner">
              <div class="kanban-label">
                <h2><a href="#">Art Ramadani 3</a></h2>
                <p>Tolerably earnestly middleton extremely distrusts she boy now not.</p>
              </div>
            </div>
          </article>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal modal-static fade" id="processing-modal" role="dialog" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <div class="text-center">
          <i class="fa fa-refresh fa-5x fa-spin"></i>
          <h4>Processing...</h4>
        </div>
      </div>
    </div>
  </div>
</div>

最佳答案

我想你只是在寻找这样的东西，作为引用你可以 use

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable1, #sortable2 {
    border: 1px solid #eee;
    width: 142px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
  }
  #sortable1 li, #sortable2 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 120px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  } );
  </script>
</head>
<body>
 
<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
 
<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>
 
 
</body>
</html>

关于jquery - 如何使用 jquery 添加拖放 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58117384/

25

4

0

文章推荐： jquery - 在 jQuery 的一个选择器中选择多个 div

文章推荐： jquery - 图片库按钮不会淡出并且图像消失

文章推荐： jQuery 悬停时显示，鼠标移开时隐藏

文章推荐： python scipy.signal.peak_widths --> 绝对高度？ (fft -3dB 阻尼)

c# - 属性与 get 之间的区别；放;没有得到；放;
这个问题在这里已经有了答案: Difference between Property and Field in C# 3.0+ (10 个答案) 关闭 10 年前。我不明白静态属性之间的区别: p
jquery拖/放-获取被拖放的元素的id
当元素被拖放时，有没有办法从被拖动的元素中获取 id(或其他属性值)？例如，在左侧，我有一堆 div，我可以将图像放入其中。右边有一个 div 用来保存图像。当我将图像从右侧拖动到左侧的 div 时
c# - 获取问题；放;
每当我更改其中一个类属性时，我想设置一个修改标志，如下所示 public bool Modified { get; set; } public bool Enabled { get; set { Mo
C# HttpClient 放
由于某种原因，我下面的代码曾经可以正常工作，但现在却引发了一个异常: public static async Task HttpPut(string inUrl, string inFilePath)
javascript - 放；在函数定义的末尾
为什么将 ; 放在最佳实践中？在函数定义的末尾。例如 var tony = function () { console.log("hello there"); }; 优于: var tony
bitmap - EaselJS:有问题的拖/放
我在容器内有一个位图。当我拖动容器时，光标变为编辑文本形状，图像也跳到光标的右下角(好像我从左上角拿着图像并拖动它)。这是我的代码，所以你可以看到我有 RTFM: function createIc
c# - 表达式主体属性与 {get;放;}
这个问题已经有答案了: C# 3.0 auto-properties — useful or not? [closed] (17 个回答) 已关闭 6 年前。当我让 Visual Studio 20
c# - 多么简单的得到；放;在一个类意味着？
以类中的以下代码为例: public class Employee : IEntity { public string FirstName { get; set; } public s
javascript - 放(存)json数据
我有 json 数据: { "products": [ { "productId" : 0, "productImg" : "../img/product-ph
c# - { 得到;放; } 在变量声明中
这个问题在这里已经有了答案: What is the difference between a field and a property? (33 个答案) 关闭 9 年前。我在一本书上找到这样声
c# - 得到;放;变量
我正在设置多个方法，想知道如何继续将一个变量(“顶部”变量)传递给不同的方法。主要方法: public static void Main(string[] args) { i
bash - Hadoop Crontab 放
我正在尝试使用 crontab 编写一个简单的任务，将一些文件从本地复制到 HDFS。我的代码是这样的: #!/bing/ksh ANIO=$(date +"%Y") MES=$(date +"%m"
javascript - 限制 jQuery 中节点的拖/放？
有人可以告诉我如何使用这个解决方案来解决我的问题吗？我也想限制 id 中包含文本“not”的节点的拖/放。 jsTree drag and drop restrict folders by class
javascript - jquery sortable 禁用特定项目之间的拖/放
我的情况如下 - 我正在对可能包含链接行的表进行排序: row 1 row 2 row 3 row 4 row 5 我需要的是禁止在.linked-to-p
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
scheme - 放!并在 Scheme 中别名
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
ASP.net AJAX 拖/放？
我想知道是否有人知道是否有一个预先制定的解决方案:我在 ASP.net 网站上有一个列表，我希望用户能够通过拖放对列表进行重新排序。此外，我希望有第二个列表，用户可以将第一个列表中的项目拖到其中。到
scheme - 放!并在 Scheme 中别名
我在理解似乎不一致的方案中的破坏性操作时遇到问题。即为什么下例中bar没有变化 (define foo '(a b)) (define bar foo) (set! foo '(c d)) foo >
c# - 如何使 ModalPopup 拖/放
我在我的 Web 应用程序中使用 Ajax ControlToolkit 中的 ModalPopupExtender。我将其 Drag 属性设置为 true，但是当我拖动弹出面板并将其放到新位置时，它
jQuery UI 拖/放，捕捉到底部
所以，基于this answer ，我有一组可以拖放并卡入到位的 div。唯一的问题是，可拖动的 div 具有不同的高度，我需要它们始终捕捉到目标的底部，而不是顶部。您可以在this JsFiddl

首页

博学

6Ren·AI

商城

jquery - 如何使用 jquery 添加拖放 div？