画像一覧 
2009年06月02日
jQuery.droppable(2)
最近のお昼はお弁当な suzukin です。
家計節約に一役買っていたらいいんですが...。
今回は、jQuery のドラッグ & ドロップ + 並び替えについてです。
家計節約に一役買っていたらいいんですが...。
今回は、jQuery のドラッグ & ドロップ + 並び替えについてです。
ドロップ先の要素を jQuery.ui.sortable とする事で、ドロップ先の要素を並び替える事ができます。
前回より ui.sortable.js を追加しています。
■ドラッグ側要素の設定
ドラッグ側の要素へ、以下のオプションを設定します。
・helper:ドラッグ時の表示方法 (original / clone / function)
・connectToSortable:接続先の sortable
今回は、ドラッグ側要素のコピーをドロップしますので、helper へ clone を 設定しています。
■ドロップ先側要素の設定
ドロップ側要素へは、ドロップ可能な要素の指定と、ドロップ時イベントを設定します。
最初に append を実行していますが、これはドロップ先に要素が何もないとドロップできないため、ダミーとして実行しています。
また、ドロップ時イベントでは、sortable("refresh") メソッドを実行して、並び替えが発生した事を通知する必要があります。
ということで、デモになります。
左側に並んでいますアイコンをドラッグし、右側の領域へドロップしてみて下さい。
(ブラウザによっては、ドロップ先の領域が見えないかもしれませんが、アイコンをドラッグしますと表示されます)
いくつかドロップしましたら、ドロップ先のアイコンをドラッグし、並び替えてみて下さい。
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.ui.droppable.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.ui.sortable.js"></script>
前回より ui.sortable.js を追加しています。
■ドラッグ側要素の設定
ドラッグ側の要素へ、以下のオプションを設定します。
・helper:ドラッグ時の表示方法 (original / clone / function)
・connectToSortable:接続先の sortable
今回は、ドラッグ側要素のコピーをドロップしますので、helper へ clone を 設定しています。
$(".tools").draggable({
helper: 'clone',
connectToSortable: '#sortarea'
});
■ドロップ先側要素の設定
ドロップ側要素へは、ドロップ可能な要素の指定と、ドロップ時イベントを設定します。
最初に append を実行していますが、これはドロップ先に要素が何もないとドロップできないため、ダミーとして実行しています。
また、ドロップ時イベントでは、sortable("refresh") メソッドを実行して、並び替えが発生した事を通知する必要があります。
$("#sortarea")
.append("<li/>").sortable().empty()
.droppable({
accept: '.tools',
drop: function(e, ui) {
$("#sortarea").sortable("refresh");
}
});
ということで、デモになります。
左側に並んでいますアイコンをドラッグし、右側の領域へドロップしてみて下さい。
(ブラウザによっては、ドロップ先の領域が見えないかもしれませんが、アイコンをドラッグしますと表示されます)
いくつかドロップしましたら、ドロップ先のアイコンをドラッグし、並び替えてみて下さい。
Posted by シーポイントシステム開発 at 22:00
この記事へのコメント
Hello dear friend, I would like to offer placement of your link (or links) on different platforms of the internet such as: forums, blogs, comments and much more. . .
Increase your Visibility Boost Your Seo Rank - Get Organic Traffic From Google. Ranking in Google isn’t hard. All you need is a healthy number of backlinks from referring domains that have authority and trust in Google’s eyes.
This Backlinks Service Benefits:
1. Easily get Google rankings
2. Get a lot of traffic from Google
3. You can earn from the website in different ways
4. Increase Domain Authority (DA)
Quality guaranteed !
PRICE - 20$
WebSite - https://goo.su/959En7
Increase your Visibility Boost Your Seo Rank - Get Organic Traffic From Google. Ranking in Google isn’t hard. All you need is a healthy number of backlinks from referring domains that have authority and trust in Google’s eyes.
This Backlinks Service Benefits:
1. Easily get Google rankings
2. Get a lot of traffic from Google
3. You can earn from the website in different ways
4. Increase Domain Authority (DA)
Quality guaranteed !
PRICE - 20$
WebSite - https://goo.su/959En7
Posted by Williamsnord at 2024年10月17日 03:02