1

<li>すべてのタグに次のものが割り当てられているという点で、ドラッグアンドドロップを正しく機能させようとしています。

$('li').draggable( {
    containment: $selMemContainer,
    cursor: 'move',
    snap: $selMemContainer
  } );

<li>の1つを親と一緒に別の場所にドラッグアンドドロップしようとすると<ul>、表示から消えますが、firebug内を見ると元の場所を占めていますが、スタイル定義内に左と上の値があります（以下を参照）。アイテム1、2、4を移動しようとしたことがわかり<li>ます。Firebug内の左と上の値を削除すると<li>、ブラウザー内に再表示されます。ドラッグアンドドロップを正しく機能させるにはどうすればよいですか。

<div id="selMembersContainerDiverFieldAdmin2Photographs" class="membersContainer selMembersContainer" style="height: 351px;">
    <ul>
        <li class="ui-draggable" style="position: relative; left: -1237px; top: -309px;">
        <li class="ui-draggable" style="position: relative; left: -1237px; top: -353px;">
        <li class="ui-draggable" style="position: relative;">
        <li class="ui-draggable" style="position: relative; left: -1237px; top: -441px;">
        <li class="ui-draggable" style="position: relative;">
        <li class="ui-draggable" style="position: relative;">
    </ul>
</div>
4

3 に答える 3

1

It seems you need to use sortable instead of draggable. Sortable makes the element drag and contains them to the list. You are also allowed to drag between lists.

Example

于 2012-09-07T20:28:47.150 に答える
0

タグを閉じていませんliが、まったく問題ないかもしれませんが、

<li class="ui-draggable" style="position: relative; left: -1237px; top: -309px;"></li>

すべて<li>に終了タグが必要です。

<li>Something</li>

問題のように見えるものを使用snap: $selMemContainerしています。ここで問題を見つけるのに役立つのは、実際の例です。

HTML

<div id="selMembersContainerDiverFieldAdmin2Photographs" class="membersContainer selMembersContainer">
    <ul id="myUl">
        <li>Something</li>
        <li>Something Else</li>
        <li>Something More</li>
    </ul>
</div>

JS

$(function(){
    var $selMemContainer=$('#selMembersContainerDiverFieldAdmin2Photographs');
    $('li').draggable( {
        containment: $selMemContainer,
        cursor: 'move',
        snap:true
    });
});​

デモ。

于 2012-09-07T20:31:01.093 に答える
0

ドラッグアンドドロップを正しく機能させようとしています

これは、あなたが正確に何を期待しているのかを私たちに多く教えてくれません。

ドラッグ可能だけを使用すると、アイテムがドラッグ可能になります。これは、デフォルトの使用によって簡単に実現されます。

var $selMemContainer = $(".selMembersContainer");    
$('li').draggable();​

これにより、アイテムを画面上で移動できるようになります。

ただし、アイテムを移動するために達成しようとしている場合は、ulソート可能である必要があります。

基本的な並べ替え可能な機能は次のようになります（並べ替え可能なIDをulに割り当てます）。

$("#sortable").sortable({
    revert: true
});

デモ-基本的なドラッグ可能なアイテムと基本的な並べ替え可能なリスト

上で述べたように、あなたが何を達成しようとしているのかは明確ではありません。上記はあなたが始めるのに役立つはずです、そしてあなたがもっと問題を抱えているならば、遠慮なく詳しく説明してください。

追加リソース

于 2012-09-07T20:40:26.093 に答える