• HOME
  •  > 
  • jQuery
  •  > 
  • jQueryで画像をドラッグ＆ドロップ

jQueryで画像をドラッグ＆ドロップ

  • Posted on 2014.04.08
  • 　　jQuery

こんにちは（・∀・）

今日はjQueryで画像をドラッグ＆ドロップさせるサンプルのご紹介です。


【設置方法】

GoogleライブラリAPIからjQueryを<head>内に読み込みます。

sortable.jsは<head>内にを読み込むのではなく、<body>内の画像グループ直下に記述します。


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>は
<head>内に、

<script src="drawernav.js"></script>は
<body>内の画像グループ直下に。


参考サイト


  • 検証ブラウザ 
  • IEIE
  • FirefoxFirefox
  • OperaOpera
  • ChromeChrome
  • SafariSafari
HTML
<!--画像グループの直下にJavascriptを記述-->
<div id="sortable">
<img src="img/a.png">
<img src="img/b.png">
<img src="img/c.png">
</div>
<script src="sortable.js"></script>
CSS
document.write('<style>');
document.write('#sortable img:hover {cursor: move;}');
document.write('</style>');

$('#sortable').sortable();
$('#sortable').disableSelection();
▲TOP