指定した要素をドロップを受け入れる要素にします。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "ドロップされました!" );
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>ターゲットにドラッグしてください</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>ここにドロップしてください</p>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Accept</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
#draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
</style>
<script>
$(function() {
$( "#draggable, #draggable-nonvalid" ).draggable();
$( "#droppable" ).droppable({
accept: "#draggable",
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "ドロップされました!" );
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>ターゲットにドラッグしてください。</p>
</div>
<div id="draggable-nonvalid" class="ui-widget-content">
<p>ドラッグ可能ですが、ドロップ出来ません。</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>'#draggable'を受け付けます</p>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Prevent propagation</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
#droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable, #droppable-inner" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "> p" )
.html( "ドロップされました!" );
return false;
}
});
$( "#droppable2, #droppable2-inner" ).droppable({
greedy: true,
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "> p" )
.html( "ドロップされました!" );
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>ターゲットにドラッグしてください</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>ドロップ要素外側</p>
<div id="droppable-inner" class="ui-widget-header">
<p>ドロップ要素内側 (独占しない)</p>
</div>
</div>
<div id="droppable2" class="ui-widget-header">
<p>ドロップ要素外側</p>
<div id="droppable2-inner" class="ui-widget-header">
<p>ドロップ要素内側 (独占する)</p>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Revert draggable position</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function() {
$( "#draggable" ).draggable({ revert: "valid" });
$( "#draggable2" ).draggable({ revert: "invalid" });
$( "#droppable" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "ドロップされました!" );
}
});
});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>ターゲットにドロップされると、元の位置に戻ります。</p>
</div>
<div id="draggable2" class="ui-widget-content">
<p>ターゲットにドロップされないと、元の位置に戻ります。</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>ここにドロップしてください。</p>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Shopping Cart Demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
h1 { padding: .2em; margin: 0; font-size:14px; }
#products { float:left; width: 500px; margin-right: 2em; }
#cart { width: 200px; float: left; margin-top: 1em; }
/* style the list to maximize the droppable hitarea */
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
</style>
<script>
$(function() {
$( "#catalog" ).accordion();
$( "#catalog li" ).draggable({
appendTo: "body",
helper: "clone"
});
$( "#cart ol" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
$( this ).removeClass( "ui-state-default" );
}
});
});
</script>
</head>
<body>
<div id="products">
<h1 class="ui-widget-header">商品</h1>
<div id="catalog">
<h2><a href="#">Tシャツ</a></h2>
<div>
<ul>
<li>ロルキャット シャツ</li>
<li>チーズバーガー シャツ</li>
<li>バケット シャツ</li>
</ul>
</div>
<h2><a href="#">バッグ</a></h2>
<div>
<ul>
<li>縞模様</li>
<li>黒革</li>
<li>ワニ皮</li>
</ul>
</div>
<h2><a href="#">ガジェット</a></h2>
<div>
<ul>
<li>iPhone</li>
<li>iPod</li>
<li>iPad</li>
</ul>
</div>
</div>
</div>
<div id="cart">
<h1 class="ui-widget-header">ショッピングカート</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">ここに追加してください</li>
</ol>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Simple photo manager</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
.gallery.custom-state-active { background: #eee; }
.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
.gallery li a { float: right; }
.gallery li a.ui-icon-zoomin { float: left; }
.gallery li img { width: 100%; cursor: move; }
#trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */
#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
#trash h4 .ui-icon { float: left; }
#trash .gallery h5 { display: none; }
</style>
<script>
$(function() {
// there's the gallery and the trash
var $gallery = $( "#gallery" ),
$trash = $( "#trash" );
// let the gallery items be draggable
$( "li", $gallery ).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});
// let the trash be droppable, accepting the gallery items
$trash.droppable({
accept: "#gallery > li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
deleteImage( ui.draggable );
}
});
// let the gallery be droppable as well, accepting items from the trash
$gallery.droppable({
accept: "#trash li",
activeClass: "custom-state-active",
drop: function( event, ui ) {
recycleImage( ui.draggable );
}
});
// image deletion function
var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
function deleteImage( $item ) {
$item.fadeOut(function() {
var $list = $( "ul", $trash ).length ?
$( "ul", $trash ) :
$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
$item.find( "a.ui-icon-trash" ).remove();
$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
$item
.animate({ width: "48px" })
.find( "img" )
.animate({ height: "36px" });
});
});
}
// image recycle function
var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
function recycleImage( $item ) {
$item.fadeOut(function() {
$item
.find( "a.ui-icon-refresh" )
.remove()
.end()
.css( "width", "96px")
.append( trash_icon )
.find( "img" )
.css( "height", "72px" )
.end()
.appendTo( $gallery )
.fadeIn();
});
}
// image preview function, demonstrating the ui.dialog used as a modal window
function viewLargerImage( $link ) {
var src = $link.attr( "href" ),
title = $link.siblings( "img" ).attr( "alt" ),
$modal = $( "img[src$='" + src + "']" );
if ( $modal.length ) {
$modal.dialog( "open" );
} else {
var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
.attr( "src", src ).appendTo( "body" );
setTimeout(function() {
img.dialog({
title: title,
width: 400,
modal: true
});
}, 1 );
}
}
// resolve the icons behavior with event delegation
$( "ul.gallery > li" ).click(function( event ) {
var $item = $( this ),
$target = $( event.target );
if ( $target.is( "a.ui-icon-trash" ) ) {
deleteImage( $item );
} else if ( $target.is( "a.ui-icon-zoomin" ) ) {
viewLargerImage( $target );
} else if ( $target.is( "a.ui-icon-refresh" ) ) {
recycleImage( $item );
}
return false;
});
});
</script>
</head>
<body>
<div class="ui-widget ui-helper-clearfix">
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">タトラス山</h5>
<img src="images/high_tatras_min.jpg" alt="タトラス山の頂上" width="96" height="72" />
<a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">タトラス山 2</h5>
<img src="images/high_tatras2_min.jpg" alt="山湖の小屋" width="96" height="72" />
<a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">タトラス山 3</h5>
<img src="images/high_tatras3_min.jpg" alt="登山プランを思案中…" width="96" height="72" />
<a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">タトラス山 4</h5>
<img src="images/high_tatras4_min.jpg" alt="Kozi kopkaの頂上" width="96" height="72" />
<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
</li>
</ul>
<div id="trash" class="ui-widget-content ui-state-default">
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> ゴミ箱</h4>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>jQuery UI Droppable - Visual feedback</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/demos/style.css" />
<style>
#draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
#droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 10px; }
h3 { clear: left; margin-bottom: 2px;}
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
hoverClass: "ui-state-active",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "ドロップされました!" );
}
});
$( "#draggable2" ).draggable();
$( "#droppable2" ).droppable({
accept: "#draggable2",
activeClass: "ui-state-hover",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "ドロップされました!" );
}
});
});
</script>
</head>
<body>
<h3>要素が重なると反応します:</h3>
<div id="draggable" class="ui-widget-content">
<p>ターゲットにドラッグしてください</p>
</div>
<div id="droppable" class="ui-widget-header">
<p>ここにドロップ</p>
</div>
<h3>ドラッグ中に反応します:</h3>
<div id="draggable2" class="ui-widget-content">
<p>ターゲットにドラッグしてください</p>
</div>
<div id="droppable2" class="ui-widget-header">
<p>ここにドロップ</p>
</div>
</body>
</html>
| オプション |
説明 |
| accept |
型：Selector or Function()
初期値："*"
- Selector
-
受け入れる要素をセレクターで指定します。
- Function
-
ページ内の各ドラッグ要素から、ここで指定した関数が呼ばれます。
関数の第1引数として(おそらくドラッグ要素が)渡されます。
ドロップを受け入れる要素であれば、trueを返すようにしてください。
ドラッグ要素でドロップを受けれる要素の制御を行います。
$( ".selector" ).droppable({ accept: ".special" });
// getter
var accept = $( ".selector" ).droppable( "option", "accept" );
// setter
$( ".selector" ).droppable( "option", "accept", ".special" );
|
| activeClass |
型：String
初期値：false
指定した場合は、受け入れドラッグ要素がドラッグされている間は、指定したclassがドロップ要素に追加されます。
|
| addClasses |
型：Boolean
初期値：true
falseが設定されると、ui-droppableクラスが追加されません。
数百もの要素でドロップ要素を生成するような、パフォーマンスを最適化する必要がある際に必要とされます。
|
| disabled |
型：Boolean
初期値：false
trueを指定すると、ドロップ要素を無効化します。
|
| greedy |
型：Boolean
初期値：false
初期状態では、ドロップを受け入れる要素が入れ子になっている場合、
各要素はそれぞれ要素を受け入れますが、
この要素をtrueにすると、親要素はドロップを受け入れなくなります。
|
| hoverClass |
型:String
初期値:false
指定されると、ドラッグ要素がドロップを受け入れる要素の上に重なると、指定されたclassを追加します。
|
| scope |
型:String
初期値:"default"
acceptオプションに加えて、ドラッグ要素・ドロップ受け入れ要素をセットのグループにします。
ドロップ受け入れ要素と同じscopeの値を持つドラッグ要素がドロップ要素に受け入れられるようになります。
|
| tolerance |
型:String
初期値:"intersect"
ドラッグ要素がドロップ受け入れ要素に重なっているかを検証するモードを指定します。
- "fit"
-
完全に重なっているか。
- "intersect"
-
縦横が少なくとも半分は重なっているか。
- "pointer"
-
マウスポインターが重なっているか。
- "touch"
-
重なっている領域があるか。
|
| メソッド | 説明 |
| destroy() |
ドロップの機能を完全に削除します。
$( ".selector" ).droppable( "destroy" );
|
| disable() |
ドラッグを無効化します。
|
| enable() |
ドラッグを有効にします。
|
| option( optionName ) |
戻り値：Object
optionNameに指定したオプションの現在の値を取得します。
- optionName
-
型：
String
取得したいオプションの名前を指定します。
|
| option() |
戻り値：PlainObject
オプションの各キーと値がペアとなったオブジェクトを返します。
|
| option( optionName, value ) |
引数のoptionNameのオプションに値を設定します。
- optionName
-
型：
String
設定したいオプションの名前を指定します。
- value
-
型：
Object
設定したい値を指定します。
|
| option( options ) |
オプションに設定したい各キーと値がペアとなったオブジェクトを指定します。
- option
-
型：
Object
設定したいオプションのキーと名前のペアを指定します。
|
| widget() |
戻り値：Object
ドラッグを含めたjQueryオブジェクトを返します。
|
| イベント |
説明 |
| activate( event, ui ) |
型：dropactivate
- ui.draggable
-
型:
jQuery
ドラッグ要素のjQueryオブジェクトです。
- ui.helper
-
型:
jQuery
ドラッグのヘルパー要素のjQueryオブジェクトです。
- ui.position
-
型:
Object
ドラッグのヘルパー要素のpositionを{top, left}のオブジェクトとして格納しています。
- ui.offset
-
型:
Object
ドラッグのヘルパー要素のoffsetを{top, left}のオブジェクトとして格納しています。
ドロップ受け入れ要素に、ドラッグ要素のがドラッグが開始される際にトリガされます。
ドロップされた際に要素を"ライトアップ"するような場合に有用です。
$( ".selector" ).droppable({
activate: function( event, ui ) {}
});
$( ".selector" ).on( "dropactivate", function( event, ui ) {} );
|
| create( event, ui ) |
型：dropcreate
ドロップ受け入れ要素が生成された際にトリガされます。
|
| deactivate( event, ui ) |
型：dropdeactivate
- ui.draggable
-
型:
jQuery
ドラッグ要素のjQueryオブジェクトです。
- ui.helper
-
型:
jQuery
ドラッグのヘルパー要素のjQueryオブジェクトです。
- ui.position
-
型:
Object
ドラッグのヘルパー要素のpositionを{top, left}のオブジェクトとして格納しています。
- ui.offset
-
型:
Object
ドラッグのヘルパー要素のoffsetを{top, left}のオブジェクトとして格納しています。
受け入れドラッグ要素の、ドラッグ操作が停止した際にトリガされます。
|
| drop( event, ui ) |
型：drop
- ui.draggable
-
型:
jQuery
ドラッグ要素のjQueryオブジェクトです。
- ui.helper
-
型:
jQuery
ドラッグのヘルパー要素のjQueryオブジェクトです。
- ui.position
-
型:
Object
ドラッグのヘルパー要素のpositionを{top, left}のオブジェクトとして格納しています。
- ui.offset
-
型:
Object
ドラッグのヘルパー要素のoffsetを{top, left}のオブジェクトとして格納しています。
ドラッグ要素がドロップ受け入れ要素にドラッグされた際にトリガされます。
(ドラッグ条件はthetoleranceオプションに依存します。)
|
| out( event, ui ) |
型：dropout
ドラッグ要素がドロップ受け入れ要素の外にドラッグされた際にトリガされます。
(ドラッグ条件はthetoleranceオプションに依存します。)
|
| over( event, ui ) |
型：dropover
- ui.draggable
-
型:
jQuery
ドラッグ要素のjQueryオブジェクトです。
- ui.helper
-
型:
jQuery
ドラッグのヘルパー要素のjQueryオブジェクトです。
- ui.position
-
型:
Object
ドラッグのヘルパー要素のpositionを{top, left}のオブジェクトとして格納しています。
- ui.offset
-
型:
Object
ドラッグのヘルパー要素のoffsetを{top, left}のオブジェクトとして格納しています。
ドラッグ要素がドロップ受け入れ要素上に重なった際にトリガされます。
(重なっているかの判定はthetoleranceオプションに依存します。)
|
Back to top