jQuery UI直感的に振る舞うことができない - 上下に移動するのが難しい

this JSFiddle、のように、アイテムを上下に移動するには、アイテムを右にドラッグする必要があります。jQuery UI直感的に振る舞うことができない - 上下に移動するのが難しい

私は、ユーザーがアイテムを上下左右にまっすぐに移動できるようにしたいと考えています。明らかに、垂直方向に並べ替えるだけで右にドラッグするのは直感的ではありません。

矢印アイコンはhandleで、アイテムを移動するにはクリックしてドラッグする必要があります。

HTML：

<body class="container"> 
    <div class="form-group"> 
    <label class="control-label col-md-2">Testeroo</label> 
    <div class="col-md-10"> 
     <ul class="sortable fa-ul"> 
     <li> 
      <i class="fa-li fas fa-arrows-alt-v fa-lg"></i> 
      <input value="One" /> 
      <input value="Two" /> 
     </li> 
     <li> 
      <i class="fa-li fas fa-arrows-alt-v fa-lg"></i> 
      <input value="One" /> 
      <input value="Two" /> 
     </li> 
     </ul> 
    </div> 
    </div> 
</body>

JS：

$(".sortable").sortable({ handle: "i.fa-li" });

ことがfa*クラスがあるものだ、Font Awesomeからアイコンを使用します。私はまた、それがフィドルにある何か違いがあれば、ブートストラップを使用しています。

出典

2017-12-21 Sinjai

を、私はちょうどそれを上書きする方法がわからない、これは動作を意図していると確信しています。 – Sinjai

並べ替えを有効にすると、項目を上下左右に、または左右に移動することができます。

デモを変更してNEW DEMOを作成しました。ここで

はあなたがaxisオプション追加できる方法です：ところで

$(".sortable").sortable({ 
    handle: "i.fa-li", 
    axis: "y" 
});

出典

2017-12-26 05:56:58

これは間違いなく私が探しているものです。アイテムをあまりに速く動かすと、順序が変わらないことが知られている問題ですか？それとも私の終わりには何か？ – Sinjai

私はそれが知られている問題であるかどうかはわかりませんが、私はこのようなタイプの動作を引き起こしているあなたのコードに大きな問題は見当たりません。私は、jquery-uiソート可能なAPIドキュメントとハンドルのレイアウトをカスタマイズする方法を詳しく見ておくべきだと思っています。私はあなたがそこからあなたの答えを得るだろうと確信しています:) –

私は疑いがありますハンドルですが、可能です。それにもかかわらず、それは新しい質問です。頭の上から何かを知っているかどうかは不思議でした。これは私が探していた答えであり、私は受け入れられたとマークしました。 – Sinjai

これはulの境界内に存在しないハンドルi.fa-liの結果です。 background-colorをul要素に置くと、ハンドルが外側にあることがわかるため、右にドラッグするまでマウスはソート可能領域に入りません。

ハンドルがul領域の内側にあるように調整する必要があります。これは実行されません。

デモンストレーションのために、fa-li要素を右に移動し、li要素の残りの部分を埋め込み、 で説明しました。それはハックですが、それはそれは固定することができていることを示しています

https://jsfiddle.net/2w0Lq3to/2/

はここでCSSと.pad要素を使用して、より良い修正だ：

あなたがに sortable's axisオプションを使用することができます

https://jsfiddle.net/2w0Lq3to/3/

出典

2017-12-21 23:12:11

2番目のフィドルのためにCSSで何が起こっているのか詳しく説明できますか？私は 'em'値を少し調整して、もっと寛容にして（ユーザーが下降してもらえるように）、私は成功したと思っていますが、それは悪影響がありました。https： //jsfiddle.net/1hez6qaq/ – Sinjai

あなたの 'li'要素の幅があふれています。固定幅、または100％を超えるパーセンテージを広げてください：https://jsfiddle.net/1hez6qaq/2/ –

jQuery UI直感的に振る舞うことができない - 上下に移動するのが難しい

答えて

関連する問題