0

我对 JQuery 完全陌生，基本上对整个 Web 开发也很陌生。我正在尝试将一些 div（+ 它们的内容）从左侧 div（#selection）拖动到右侧 div（#drop），然后使它们在“#drop”div 中可排序。我已经完成了拖动部分，但是即使我已经实现了必要的代码，它们也无法在“#drop”div 中排序。

源代码：

html结构：

 <body class="doc">
    <div id="header">Business Entry</div>
    <div id="content">
      <div id="selection">
        <div id="dragTelNr" class="draggableElement">
          Telephone Number
        </div>
        <div id="address" class="draggableElement">
          Address
        </div>
      </div>
      <div id="drop">

      </div>
      <div class="clear"></div>
    </div>
  </body>

js：

$(document).ready(function () {

  $.fn.exists = function () {
    return this.length !== 0;
  }

  var ids = new Array();
  ids[0] = 1;
  ids[1] = 1;

  var nextSibling;
  var draggableOptions = { opacity: 0.6, revert: true, containment: '#content', zIndex: 100};

  $('.draggableElement').draggable({opacity: 0.6, revert: true, containment: '#content', zIndex: 100,
    start: function(event, ui){
      //nextSibling = ui.helper.next();
    }
  });

  $('#drop').droppable({
    hoverClass: '.dropHover',
    accept: '.draggableElement',
    activate: function(event, ui){
      nextSibling = ui.draggable.next();    
    },
    drop: function(event, ui){

      var draggable = ui.draggable;

      if (draggable.parent().attr('id') != 'drop'){

        var draggableId = draggable.attr('id');

        if (nextSibling.exists() == false){
          $( '<div id = "' + draggableId + '" class="draggableElement"></div>' ).html( ui.draggable.html()).draggable(draggableOptions).appendTo('#selection');
          alert("Insert at the end " + nextSibling);  
        }
        else{
          $( '<div id = "' + draggableId + '" class="draggableElement"></div>' ).html( ui.draggable.html()).draggable(draggableOptions).insertBefore(nextSibling);
            alert("Insert before " + nextSibling); 
        }

        switch(draggableId){
          case 'dragTelNr':
            alert(draggable.attr('id'));
            draggable.attr('id', draggableId + ids[0]).appendTo($(this));
            alert(draggable.attr('id'));
            ids[0]++;
            break;

          case 'address':
            alert(draggable.attr('id'));
            draggable.attr('id', draggableId + ids[1]).appendTo($(this));
            alert(draggable.attr('id')); 
            ids[1]++;
            break;     
        }
      }  
    }

  }); 

  $('#drop').sortable();
  //$('#drop').dissableSelection();
});

CSS：

.doc  {
  margin:auto; /* center in viewport */
  width: 1000px; /* fix page width */
}

#header {
    height: 80px;
    width: 990px;
    background:#efefef;
    border: 1px solic black;
    text-align: center; 
    font: bold 180% arial;
    padding: 1em;
}

#selection { 
  width: 300px; 
  height: 500px; 
  border: 1px solid black; 
  float: left; 
  background-color: #D3D3D3;
  text-align:center;
}

#drop { 
  width: 670px; 
  height: 500px; 
  border: 1px solid black; 
  float: left;
  text-align: center;
}


.clear { 
  clear: both;
} 

#content {
  width: 990px; 
  height: 500px;     
}

.draggableElement {
  line-height: 1.286;
  margin-top: 1.286em;
  margin-bottom: 1.286em;
  border: 2px solid black;


}

.dropHover{
  border: 3px solid black;
}

顺便说一下，库已经正确导入，所以问题不存在。如果有人对如何使其工作有一些建议，我将不胜感激。

这是我的源代码的链接：http: //jsfiddle.net/Bt23y/

4

2 回答 2

3

我清理了你的小提琴以专注于重要的事情：

http://jsfiddle.net/Bt23y/1/

如果您希望能够将项目从一个列表拖到另一个列表中，使其可排序，您可以使用connectWithjqueryUIsortable

<ul id="selection">
    <li>Item1</li>        
    <li>Item2</li>
</ul>
<ul id="drop"></ul>

$('#drop').sortable({connectWith: $('#selection')});
$('#selection').sortable({connectWith: $('#drop')});
于 2013-03-26T10:21:41.140 回答
1

“通过将选择器传递给 connectWith 选项，将项目从一个列表排序到另一个列表，反之亦然。最简单的方法是使用 CSS 类对所有相关列表进行分组，然后将该类传递给可排序函数（即，连接：'.myclass'）。”

   $('.sortableContainer).sortable({
       ...
       connectWith: ".sortableContainer",
       ...
    })

演示http://jqueryui.com/sortable/#connect-lists

于 2013-03-26T10:16:19.820 回答