IEでもjQueryでドラッグ機能を実装する！draggable()！
サクウェブＴＶはコチラ↓↓↓
ドラッグ機能はとても簡単に実装できます。
色々説明するより、デモを作ってしまった方が早いので作りましょう。
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="./jquery.js" type="text/javascript"></script> <script src="./jquery-ui-1.10.3.custom.js" type="text/javascript"></script> <script src="./script.js" type="text/javascript"></script> <link rel="stylesheet" href="style.css" /> <title>test</title> </head> <body> <div id="drag"> </div> </body> </html>
style.css
#drag{
width:100px;
height:100px;
background:#ff0000;
cursor:move;
}
script.js
$(function(){
$("#drag").draggable({
opacity:0.8
});
});
あとは、
からjquery_uiの類をダウンロードしてきて必要なディレクトリに配置すればＯＫです。
※index.htmlのソースでわかりますが、このデモではルートに配置しています。
ちなみに、script.jsの
draggable({ ●● })の●●部分には各種プロパティを設定できます。
今回はドラッグ中に透明度が80％になるように一つのプロパティを指定しました。
もちろん複数のプロパティを指定することもできます。
詳しくは以下のページが詳しいと思います。
