jQuery - DIV/sortable 요소 안에 요소를 드래그

다른 div 요소 안에 div를 드래그하는 데 문제가 있습니다.jQuery - DIV/sortable 요소 안에 요소를 드래그

HTML은 다음과 같습니다

<div id="grid"> 
    <div id="el1" style="width:300px"></div> 
    <div id="el2" style="width:100px"></div> 
    <div id="el3" style="width:100px"></div> 
    <div id="el4" style="width:100px"></div> 
</div>

모든 요소는 드래그 할 수 있고 CSS 스타일 float:left;position:relative; 있습니다. el1을 el3으로 드래그하면 작동하지만 물론 el3 요소와 겹칠 것입니다. draggin jquery draggable은 정상적으로 작동하지만이 위치의 HTML 코드에 el1 인 div를 삽입하고 싶습니다.

는 다음과 같이 것 :

<div id...> 
    <div id="el2... 
    <div id="el3... 
    <div id="el1... 
    <div id="el4... 
</div>

내 문제를 지금,이 그리드입니다. el1의 너비는 '300'이며 그 이외의 모든 너비는 '100'입니다. el1을 el3으로 바꾸려면 , el3 및 el4을 el1 및 el1 대신 el2, el3, el4으로 바꿔야합니다.

el4 다음에 div HTML 코드를 옮길 필요가 있다고 생각합니다. 그러나 가장 가까운 요소를 결정하는 방법은 무엇입니까?

-------

나는 방법으로 정렬 사용하려고 이 ... 여기 http://jsfiddle.net/vwK5e/2/ 를 참조하지만 ------- 업데이트] 당신이 3 번 이상 빨간색 상자를 넣어 경우, 빨간색 상자는 두 번째 줄 (올바른 위치)에 있지만 번호 4는 빈 칸의 번호 3 옆에 있어야합니다.

TIA frgtv10

출처

2012-07-18 frgtv10

무엇 : 이 외에도 나는 이제 jQuery 플러그인의 도움이 masonry (masonry 링크)

예라고 얻고있다. 귀하의 질문에 아무것도 읽지 않았으므로 [jQuery UI Draggable] (http://jqueryui.com/demos/draggable/)에서 다룰 수 없습니다. – feeela

나는 그것을 다룰 수 없다는 것을 안다. 그게 내가 해결책을 물었던 이유 :) 나는 내 질문을 업데이트했다. – frgtv10

이 http://jqueryui.com/demos/sortable/#display-grid

을 참조하십시오 난 당신이 같은 기능을 원하는 것 같아요.

대답

A different kind of jquery sortable

출처

2012-07-18 10:52:03 jaychapani

나는 이미이 방법을 시도했지만 요소의 크기가 다른 경우에는 작동하지 않습니다. sortable과 함께, 나는 빈 공간에 문제가있다. 위에서 설명한 것처럼 이동하면 빈 공간이 사용되지 않습니다. 내가 뭐라는지 알 겠어? – frgtv10

제발 내 질문에 (업데이트) 위의 의견을 봐 - http://jsfiddle.net/vwK5e/2/ – frgtv10

좀 봐 http://stackoverflow.com/questions/5500302/a -different-kind-of-jquery-sortable – jaychapani

내 솔루션은 다음과 같습니다 : 지금 (sortable에 링크) sortable를 사용하고

대신 jQuerys draggable의

. 정확히 문제가

// Masonry 
$('#container').masonry({ 
    itemSelector: '.element', 
    isResizable: true, 
    columnWidth: 100 
}) 


// Sortable 
$('#container').sortable({ 
    items: '.element', 
    forcePlaceholderSize: true, 
    placeholder: 'card-sortable-placeholder element', 
    tolerance: 'pointer', 
    handle: '.handle', 
    cursor: 'move', 
    cancel: '.notdrag', 

    start: function(event, ui) {  
      ui.item.addClass('dragging').removeClass('element'); 
      ui.item.parent().masonry('reload') 
     }, 
    change: function(event, ui) { 
       ui.item.parent().masonry('reload'); 
     }, 
    stop: function(event, ui) { 
       ui.item.removeClass('dragging').addClass('element'); 
       ui.item.parent().masonry('reload'); 
     } 

    });

출처

2012-07-19 09:48:26 frgtv10

jQuery - DIV/sortable 요소 안에 요소를 드래그

답변

관련 문제