Home > スポンサー広告 > User JavaScriptの練習 - ドラッグ & ドロップ

スポンサーサイト

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/124-ac180818
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog

Home > スポンサー広告 > User JavaScriptの練習 - ドラッグ & ドロップ

Home > user javascript > User JavaScriptの練習 - ドラッグ & ドロップ

User JavaScriptの練習 - ドラッグ & ドロップ

user javascript

Operaの役に立たない User JavaScriptを書いています。

Operaのページの左上にある OPERAの画像をドラッグ & ドロップできるようにする User JavaScriptを書いてみた。

スクリプトの内容は、

  1. ドラッグ & ドロップする要素を絶対配置にする。
  2. マウスボタンを押した時、フラグを立てる。要素とマウスの位置を取得する。
  3. マウスが動いた時、フラグが立っていれば、マウスが動いた距離だけ要素を動かす。
  4. マウスボタンを離した時、フラグを下ろす。
// ==UserScript==
// @include http://www.opera.com/*
// @exclude
// ==/UserScript==

document.addEventListener('load', function(e) {

    function MousePosition() {
        this.getMousePosition = function ( e) {
            this.x = e.clientX;
            this.y = e.clientY;
        }
    }

    var drag = false;
    var nodePosition = {};
    var nowMousePosition = new MousePosition();
    var startMousePosition = new MousePosition();

    // ロゴ画像を絶対配置にする
    var logoLink = document.getElementById('operalogo');
    var dragNode = logoLink.firstChild;
    dragNode.style.position = 'absolute';
    dragNode.style.zIndex='9';
    // ロゴのリンクイベントを無効にする
    logoLink.addEventListener('click', function(e) {
        e.preventDefault();
    }, false);

    // ドラック開始
    dragNode.addEventListener('mousedown', function(e) {
        drag = true;
        nodePosition.x = dragNode.offsetLeft;
        nodePosition.y = dragNode.offsetTop;
        nowMousePosition.getMousePosition( e);
        e.preventDefault();
    }, false);

    // ドラッグ
    document.addEventListener('mousemove', function(e) {
        if ( drag) {
            startMousePosition.getMousePosition( e);
            dragNode.style.left = nodePosition.x + startMousePosition.x - nowMousePosition.x + 'px';
            dragNode.style.top  = nodePosition.y + startMousePosition.y - nowMousePosition.y + 'px';
        }
    }, false);

    // ドラッグ終了
    document.addEventListener('mouseup', function(e) {
        drag = false;
    }, false);

}, false);

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/124-ac180818
Listed below are links to weblogs that reference
User JavaScriptの練習 - ドラッグ & ドロップ from Karafuto Blog

Home > user javascript > User JavaScriptの練習 - ドラッグ & ドロップ

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。