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/

アイテムをあるリストから別のリストにドラッグして並べ替え可能にしたい場合はconnectWith、jqueryUIを使用できます。sortable

<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

「selectをconnectWithオプションに渡すことで、あるリストから別のリストにアイテムを並べ替えます。これを行う最も簡単な方法は、関連するすべてのリストをCSSクラスでグループ化し、そのクラスを並べ替え可能な関数に渡すことです（つまり、 connectWith：'.myclass'）。 "

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

デモhttp://jqueryui.com/sortable/#connect-lists

于 2013-03-26T10:16:19.820 に答える