タグ

dragに関するxnightsのブックマーク (4)

  • 画像をマウスで動かす - とほほのWWW入門

    ダイナミックHTMLを用いて、画面上の画像をマウスで動かすテクニックを紹介します。Internet Explorer 4.0 以上、Netscape Communicator 4.0 以上、Netscape 6 に対応しています。 <html> <head> <title>テスト</title> <script> var obj; var offsetX; var offsetY; function doInit() { if (document.layers /* Netscape Communicator 4.* */) { objlist = document.layers; } else if (document.all /* Internet Explorer 5.* */) { objlist = document.all.tags("SPAN"); } else if (do

  • jQuery UIで実現! Ajaxで複数選択ドラッグ&ドロップ

    jQuery、プラグイン、jQuery UI、Web経由のCDNとは CSSの書き方も分かるjQueryプラグイン実践活用法(1) 基/おさらいとしてプラグインやjQuery UIについて簡単に触れ、Web経由でjQueryを使うCDNについて解説 デザインハック < リッチクライアント 2009/12/8 今回は「jQuery UI」のより進んだ活用例 ■ jQueryのプラグイン「jQuery UI」とは? 今回紹介するjQuery UIは、JavaScript(Ajax)フレームワークjQueryのプロジェクトがjQuery用に開発している、以下の機能を提供するプラグインです。 ドラッグ&ドロップなどのマウス操作の機能拡張 ユーザーインターフェイスを改善するウィジェット(アコーディオン、日付入力、ダイアログ、スライダー、タブなど) 今回は、jQuery UIのドラッグ&ドロップ機能

    jQuery UIで実現! Ajaxで複数選択ドラッグ&ドロップ
  • JavaScript,ダイナミックHTMLサンプル-マウスでドラッグ&ドロップ

    Dynamic HTMLの参考書 Java Scriptの参考書 マウスでドラッグ&ドロップ 機能 テキストや画像をマウスでドラッグ&ドロップ出来るようにするダイナミックHTMLです。 利用方法 HEAD部分にスタイル(CSS)とスクリプトを記述します。 BODY部分には、DIV要素に対してID属性iL1を指定し、ドラッグ&ドロップする対象のテキストを記述します。(ここでは「初めてのホームページ講座」) 最後にBODY要素の属性として、イベントハンドラonloadに関数Init()を指定します。 改造方法 ドラッグ&ドロップする対象のテキストのスタイルを変更可能です。 CSSリファレンスに従って、変更可 対応ブラウザ IE4,NN4以上 サンプル [サンプルを見る] [ダウンロード] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitio

  • miya2000の日記 - これからドラッグ&ドロップを書く人のために

    2012/07/22 追記 久しぶりに確認したところ、IE9 では以下で指摘している IE (このときは IE6 でした) の問題(3, 4, 6)がすべて解消されていました。 また、Firefox での問題(5)も Firefox14 で試したらは解消されていました(ただ、All-in-One Sidebar のパネルの上では mousemove イベントが発生しないようでした)。 Chrome20 や Safari5 でも問題無く動作していますから、現在においてドラッグ&ドロップを実装するには mousedown 時の preventDefault() だけでOKと言えそうです。すばらしいですね! safari で動かないらしいのでどなたか情報ください!(くやしい!) というかこういうのに勝ち負けはないので実装できてる方は是非トラックバックお願いします。当方既に ipod 中毒ですし

    miya2000の日記 - これからドラッグ&ドロップを書く人のために
  • 1