JQuery - div 정렬에 문제가 있습니다.

저는 JQuery와 기본적으로 전체 웹 개발을 처음 접했습니다. 왼쪽 div (#selection)에서 오른쪽 div (#drop)로 일부 div (+ 내용)를 드래그하여 '#drop'div에서 정렬 할 수있게하려고합니다. 나는 드래그 부분을했지만 그때 그들은 필요한 코드를 구현 했음에도 '#drop'div에서 정렬 할 수 없습니다.JQuery - 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; 
}

라이브러리가 제대로 있도록 가져온 문제는 아니오입니다. 거기있어. 누군가가 그것을 작동시키는 방법에 대한 제안이 있다면 정말 감사 할 것입니다. 여기

내 소스 코드에 대한 링크입니다. connectWith 옵션으로 선택을 전달하여리스트로부터 다른리스트에 http://jsfiddle.net/Bt23y/

출처

2013-03-26 Husky

하나의 컨테이너를 다른 컨테이너에 연결 했습니까? –

나는 중요한 일에 집중하기 위해 바이올린을 청소 :

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

다른 그들을 하나의 목록에서 항목을 드래그 할 수있게하려면 정렬 할 수 있으며 jqueryUI의

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

의 connectWith을 사용할 수 있습니다.

$('#drop').sortable({connectWith: $('#selection')}); 
$('#selection').sortable({connectWith: $('#drop')});

출처

2013-03-26 10:21:41 ohcibi

"분류 항목과 반대로,이 모든 관련 그룹입니다 간단한 방법 목록을 CSS 클래스와 함께 나열한 다음 해당 클래스를 정렬 가능한 함수 (예 : connectWith : '.myclass')로 전달합니다. "

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

데모 http://jqueryui.com/sortable/#connect-lists

출처

2013-03-26 10:16:19

JQuery - div 정렬에 문제가 있습니다.

답변

관련 문제