Question

我想使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>

Answer 1

我认为您只是在寻找类似的内容，可以参考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>

Answer 2

使用jquery实现看板的一个好例子-pen link

使用的图书馆jkanban

var KanbanTest = new jKanban({
        element : '#myKanban',
        gutter  : '10px',
        click : function(el){
            //alert(el.innerHTML);
           // alert(el.dataset.eid)
        },
        boards  :[
            {
                'id' : '_todo',
                'title'  : 'To Do (drag me)',
                'class' : 'info',
                'item'  : [
                    {
                       'id':'task-1',
                        'title':'Try drag me',
                    },
                    {
                       'id':'task-2',
                        'title':'Click me!!',
                    }
                ]
            },
            {
                'id' : '_working',
                'title'  : 'Working',
                'class' : 'warning',
                'item'  : [
                    {
                        'title':'Do Something!',
                    },
                    {
                        'title':'Run?',
                    }
                ]
            },
            {
                'id' : '_done',
                'dragTo' : ['_working'],
                'title'  : 'Done (Drag only in Working)',
                'class' : 'success',
                'item'  : [
                    {
                        'title':'All right',
                    },
                    {
                        'title':'Ok!',
                    }
                ]
            }
        ]
    });

    var toDoButton = document.getElementById('addToDo');
    toDoButton.addEventListener('click',function(){
        KanbanTest.addElement(
            '_todo',
            {
                'title':'Test Add',
            }
        );
    });

    var addBoardDefault = document.getElementById('addDefault');
    addBoardDefault.addEventListener('click', function () {
        KanbanTest.addBoards(
            [{
                'id' : '_default',
                'title'  : 'Default (Can\'t drop in Done)',
                'dragTo':['_todo','_working'],
                'class' : 'error',
                'item'  : [
                    {
                        'title':'Default Item',
                    },
                    {
                        'title':'Default Item 2',
                    },
                    {
                        'title':'Default Item 3',
                    }
                ]
            }]
        )
    });

    var removeBoard = document.getElementById('removeBoard');
    removeBoard.addEventListener('click',function(){
        KanbanTest.removeBoard('_done');
    });

body{font-family: "Lato"; margin:0; padding: 0;}
#myKanban{overflow-x: auto; padding:20px 0;}

.success{background: #00B961; color:#fff}
.info{background: #2A92BF; color:#fff}
.warning{background: #F4CE46; color:#fff}
.error{background: #FB7D44; color:#fff}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"></script>
<link href="https://www.riccardotartaglia.it/jkanban/dist/jkanban.min.css" rel="stylesheet"/>
<script src="https://gitcdn.xyz/repo/riktar/jkanban/master/dist/jkanban.min.js"></script>
<div class="container-fluid">
   <div class="row">
      <div class="col-md-12">
         <h1>jKanban</h1>
         <p>jKanban allow you to create and manage Kanban Board in your project! Try It!</p>
            <a class="btn-xl btn btn-default" href="https://github.com/riktar/jkanban" target="_blank">Fork on GitHub</a>
         <hr>
         <div id="myKanban"></div>
         <button class="btn btn-success" id="addDefault">Add "Default" board</button>
         <button class="btn btn-success" id="addToDo">Add element in "To Do" Board</button>
         <button class="btn btn-danger" id="removeBoard">Remove "Done" Board</button>
      </div>
   </div>
</div>

如何使用jQuery添加拖放div？

2 个答案: