2014年1月8日のブックマーク (1件)

  • jQueryで画像をドラッグ&ドロップするUIを実装する実験|BLACKFLAG

    以前にもjQueryを使ってドラッグでコンテンツ要素をスクロールさせるUIを紹介しましたが、ストレージサービスなどでたまに見かける、画像を特定のエリアにドラッグ&ドロップさせるUIの実験的サンプルを作ってみたのでここでも紹介してみます。 まずは動作のサンプルから。 下のサンプル画面上の画像はエリア下にある灰色のエリアにドロップすることができます。 ドラッグした画像は元のリストエリアにドラッグし直すことで元の位置に戻ります。 ドラッグエリア下にある「すべて選択」をクリックするとすべてドロップされた状態になり、「選択クリア」をクリックするとドラッグされた画像はすべてもとの位置に戻ります。 この動作の全体構成について、まずはHTMLから。 ◆HTML <div id="dragitemlist"> <ul class="draglist"> <li><span class="dragparts"

    jQueryで画像をドラッグ&ドロップするUIを実装する実験|BLACKFLAG
    arakash
    arakash 2014/01/08
    jQueryでのドラッグ & ドロップのサンプル