Jqueryソート可能なドラッグアンドドロップで '移動'カーソルが表示されない

私のリストにこの.sortable関数を使用しています。私の問題は、ドラッグ＆ドロップが使用されているときに移動カーソルを表示し、ホバー上にのみポインタカーソルを表示したいということです。私はカーソルを呼び出す私のCSSを持っている：ホバー上のポインタが、それは全く移動カーソルを表示するようではありません。それ以外はうまく動作します。以下のコード。Jqueryソート可能なドラッグアンドドロップで '移動'カーソルが表示されない

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script> 
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css"/> 
    <link rel="stylesheet" href="blah.css" type="text/css" /> 
    <script type="text/javascript" charset="UTF-8"> 
    $(document).ready(function() 
    { 
    $("#sortable").sortable({ 
     /*helper: 'clone', Tried this =(*/ 
     distance: 5, 
     delay: 300, 
     opacity: 0.6, 
     cursor: 'move', 
     update: function() {} 
    }); 
    }); 
    </script> 
    </head> 
    <body> 
    <ul id="sortable"> 
     <li class="ui-state-default">Item 1</li> 
     <li class="ui-state-default">Item 2</li> 
     <li class="ui-state-default">Item 3</li> 
    </ul> 
    </body> 
    </html>

洗面所独立CSSドキュメントが含まれています

#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.1em; line-height: 18px; height: 18px; } 
#sortable li span { position: absolute; margin-left: -1.3em; } 

/* HERE'S THE IMPORTANT STUFF! */ 
#sortable li:hover { 
    cursor: pointer; 
} 

#sortable li.ui-sortable-helper { 
    cursor: move; 
}

任意の助けいただければ幸いです。前もって感謝します。 =）

多少の情報です。 whileステートメントからdbに値が設定されたリスト。各リストアイテムはリンクなので、{cursor：Pointer;}オプションを表示します。しかし、それがドラッグされたとき、{cursor：move;}を表示する必要があります。私は上記のコードはそれを行うだろうが、動作しないと思っていただろう。私は最初の投稿と自分自身を混乱させたので、これをもう少し良くすると思った。

出典

2011-11-02 banjo

質問を編集してコメントとして追加するのではなく、追加情報を追加することができます。コメントは、他の人があなたに答えるのを助けるために、より多くの情報を求めてくれます。 –

これを行う - チャンスがあればコメントを削除することができます。 – polarblau

申し訳ありませんが、このサイトではまだ新しいです。 =） – banjo

問題は、あなたのCSS設定がすべての州で使用されているようです。

あなたはCSSを経由だけでなく、「ドラッグ」のカーソルを設定することでこれを回避することができます

#contentLeft li:hover { 
    cursor: pointer; 
} 

#contentLeft li.ui-sortable-helper{ 
    cursor: move; 
}

はここに例を示しますhttp://jsfiddle.net/mWYEH/

出典

2011-11-02 14:22:42 polarblau

パーフェクト！どうもありがとうございます。 =）私はあなたの話を孫に伝えます。 – banjo

それは間違っていたようです。それ以上は働かない。私は私が持っているもので上記の投稿を編集しました（テスト用モックアップ版）。私が間違っていることを見ることができますか？ – banjo

いいえ、私にそれを試しても問題ないと思われます。あなたはおそらく別の場所のスタイルを上書きするでしょう。あなたはどこかでオンラインでプロジェクトをしていますか？ – polarblau

はそれを行うにはあまり鈍い方法を見つけた：

#contentLeft li:not(.ui-sortable-helper) { 
    cursor: pointer; 
}

出典

2011-12-13 01:14:00

'：not（）'を使用しようとする可能性のある他の人のためのFYI。古いブラウザでは、それが問題であればサポートされていません。 http://www.w3schools.com/cssref/sel_not。asp – praneetloke

<ul id="sortable"> 
     <li class="ui-state-default" style="cursor:pointer;">Item 1</li> 
     <li class="ui-state-default" style="cursor:pointer;">Item 2</li> 
     <li class="ui-state-default" style="cursor:pointer;">Item 3</li> 
</ul>

cssから削除します。私も同じ問題に直面しているからです。そして私はちょうどこれを試してみてください、ここで私が書いたもの

出典

2014-03-05 12:51:24 Nadeem

特にスタイルシート内で定義されたスタイルを上書きしないように、インラインスタイルを使用しないでください。これが機能するのは、インラインスタイルの方が優先度が高いからです。しかし、このソリューションは、保守性が悪いという犠牲を払っています。 – polarblau

の操作を行います。ドロップ可能以上であればドラッグ可能な場合

$element.droppable({ 
    over: function() { 
    $('body').css('cursor','copy'); 
    }, 
    out: function() { 
    $('body').css('cursor','no-drop'); 
    }, 
});

これは、ユーザーが示されます。

出典

2017-12-05 07:18:45 yPhil

Jqueryソート可能なドラッグアンドドロップで '移動'カーソルが表示されない

答えて

関連する問題