divを1つの.panel-body divから別のものに移動する方法

Jquery-UI draggableでは、ある領域から別の領域にドラッグすることができません。divを1つの.panel-body divから別のものに移動する方法

以下のコードスニペットには、フィールドを含むグループヘッダー、詳細、およびグループフッター領域が含まれています。ファイル内を領域内のみにドラッグできます。グループヘッダー領域から他の領域にフィールドを移動しようとすると、その領域外に移動するとドラッグ可能なdivが見えなくなります。

divをpanel-bodyクラスのdiv間で移動できるようにするにはどうすればよいですか？

$(".panel-body").droppable({ 
    accept: ".designer-field" 
    });

コマンドはjqueryの-UIによって無視されたように見えます。

$(function() { 
 

 
    var startpos, 
 
    selected = $([]), 
 
    offset = { 
 
     top: 0, 
 
     left: 0 
 
    }; 
 

 
/* $(".designer-panel-body").droppable({ 
 
    accept: ".designer-field" 
 
    }); 
 
*/ 
 
    $(".designer-field").draggable({ 
 

 
    stop: function(event, ui) { 
 
     $(ui.draggable).detach().appendTo(this); 
 
     }, 
 
    
 
    
 
    start: function(event, ui) { 
 
     var $this = $(this); 
 
     if ($this.hasClass("ui-selected")) { 
 
     selected = $(".ui-selected").each(function() { 
 
      var el = $(this); 
 
      el.data("offset", el.offset()); 
 
     }); 
 
     } else { 
 
     selected = $([]); 
 
     $(".designer-field").removeClass("ui-selected"); 
 
     } 
 
     offset = $this.offset(); 
 
    }, 
 

 
    drag: function(event, ui) { 
 
     // drag all selected elements simultaneously 
 
     var dt = ui.position.top - offset.top, 
 
     dl = ui.position.left - offset.left; 
 
     selected.not(this).each(function() { 
 
     var $this = $(this); 
 
     var elOffset = $this.data("offset"); 
 
     $this.css({ 
 
      top: elOffset.top + dt, 
 
      left: elOffset.left + dl 
 
     }); 
 
     }); 
 
    } 
 
    }); 
 

 

 

 
    $(".panel-resizable").resizable({ 
 
    minWidth: "100%", 
 
    maxWidth: "100%", 
 
    minHeight: 1 
 
    }); 
 
});

.panel-resizable { 
 
    min-height: 1px; 
 
/* overflow: hidden; */ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.designer-field { 
 
    border: 1px solid lightgray; 
 
    white-space: pre; 
 
    overflow: hidden; 
 
    position: absolute; 
 
} 
 

 
.designer-panel-body { 
 
    min-height: 1px; 
 
/* overflow: hidden; */ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.panel-footer { 
 
    padding: 0; 
 
} 
 

 
.designer-panel, .panel-body { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class='panel designer-panel'> 
 
    <div class='panel-body designer-panel-body panel-resizable' style='height:2cm'> 
 

 
     <div class='designer-field' style='left:5px;top:6px;width:180px'>field 1 in group 1 header</div> 
 

 
     <div class='designer-field' style='left:54px;top :36px;width:160px'>field 2 in group 1 header</div> 
 
    </div> 
 

 
    <div class='panel-footer'>Group 1 Header</div> 
 
    </div> 
 

 
    <div class='panel designer-panel'> 
 
    <div class='panel-body designer-panel-body panel-resizable' style='height:1cm'> 
 
     <div class='designer-field' style='left:24px;top:2px;width:140px'>field in detail group</div> 
 
    </div> 
 
    <div class='panel-footer panel-primary'>Detail <a role="button" id="designer-detail-addband"> Add group</a> 
 
    </div> 
 
    </div> 
 

 
    <div class='panel'> 
 
    <div class='panel-body designer-panel-body panel-resizable' style='height:1cm'> 
 

 
     <div class='designer-field' style='left:44px;top:2px;width:140px'>field in group 1 footer</div> 
 
    </div> 
 
    <div class='panel-footer panel-warning'>Group 1 Footer</div> 
 
    </div>

出典

2016-10-30 Andrus

これは、あなたの「デザイナー・パネル・ボディ」クラスと「パネルサイズ変更可能な」クラスは、それらがドラッグされるとドラッグ要素が隠されていった原因、隠しに設定オーバーフローを持っていることにありますパネルの外側にある。

これを解除する必要があります。あるパネルから別のパネルに要素をドラッグできるようにする必要があります。

ここのエリア http://codepen.io/jyloo/pen/GjbmLm

HTML

<div class="drag-area"> 
    <div class="area">Droppable Area 1</div> 
    <div class="box">Box1</div> 
    <div class="box">Box2</div> 
</div> 
<div class="drag-area"> 
    <div class="area">Droppable Area 2</div> 
</div> 
<div class="result">-</div>

CSS

.drag-area { 
    width: 200px; 
    height: 200px; 
    background: #fff; 
    display: inline-block; 
    vertical-align: top; 
    position: relative; 
    margin-left: 30px; 
    border: 1px solid #ddd; 
    box-shadow: 3px 3px 6px 3px rgba(0,0,0,0.06) 
} 
.area { 
    position:absolute; 
    margin: 0 auto; 
    color: #ccc; 
    font-size: 20px; 
    bottom: 10px; 
    left: 20px; 
} 
.box { 
    width: 50px; 
    height: 50px; 
    background: #673AB7; 
    color: #fff; 
    text-align: center; 
    z-index: 2; 
    border:2px solid #512DA8; 

} 
.result { 
    display: inline-block; 
    margin-left: 30px; 
}

JS間の要素をドラッグアンドドロップ披露するデモだ

$(".box").draggable({ 
    scope: 'demoBox', 
    revertDuration: 100, 
    start: function(event, ui) { 
    //Reset 
    $(".box").draggable("option", "revert", true); 
    $('.result').html('-'); 
    } 
}); 

$(".drag-area").droppable({ 
    scope: 'demoBox', 
    drop: function(event, ui) { 
    var area = $(this).find(".area").html(); 
    var box = $(ui.draggable).html()  
    $(".box").draggable("option", "revert", false); 

    //Display action in text 
    $('.result').html("[Action] <b>" + box + "</b>" + 
         " dropped on " + 
         "<b>" + area + "</b>") 

    //Realign item 
    $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this); 
    } 
})

出典

2016-10-30 08:47:20 jyloo

ありがとうございました。出来た。このコードでヘッダーをソート可能にする方法は？私はhttp://stackoverflow.com/questions/40333881/how-to-make-header-panels-sortableに投稿しました – Andrus

divを1つの.panel-body divから別のものに移動する方法

答えて

関連する問題