ブラウザの画面にキャンバスをドラッグアンドドロップする

私はラファエロとJSの新機能です。その中のオブジェクトではなくキャンバス自体を画面上のさまざまな場所にドラッグできるようにする必要があります。私はどこでもウェブ上を見て、ヒントを見つけることができません。もちろん、ユーザーは自由な場所でキャンバスを手に入れようとしなければならないでしょう...子供オブジェクトから無料で...ブラウザの画面にキャンバスをドラッグアンドドロップする

何か手がかりをいただければ幸いです。ここで

は、私がこのサイトにキャンバスを構築する方法である：ここでは

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 
    <title>Raphael Play</title> 
    <script type="text/javascript" src="js/raphael.js"></script> 
    <script type="text/javascript" src="js/mood.js"></script> 
    <style type="text/css"> 
      #canvas_container { 
      position:absolute; 
       width: 803; 
      left:200px; 
      top:100px; 
      border: 0px solid #555; 
      -webkit-box-shadow: 0px 0px 84px #999; 
      -moz-box-shadow: 0px 0px 84px #999; 
      box-shadow: 0px 0px 84px #000; 
      border-radius: 20px 20px 20px 20px; 
      background-color:#fff; 
      background-image:url(static/VAZZZ.png); 
      } 
    </style> 
    </head> 
    <body> 
     <div id="canvas_container" ></div> 
    </body> 
</html>

出典

2011-12-29 DKean

は<div>のためのクロスブラウザのドラッグ機能とイベントリスナーです。

http://jsfiddle.net/MtbJe/

あなたのCSS（ない高さが指定されていないと幅が "PX" を行方不明になった）不完全でした。
ボックスシャドウはドラッグの滑らかさを大幅に低下させますが、実際にはこのインスタンスで画像を使用することができます（ボックスシャドウを削除してどれほど滑らかであるかを確認してください）。
実際のドラッグハンドラでUI内に何か他のものを作成したいのであれば（しかし、それでもなお<div>全体を移動する）、イベントリスナをその要素に合わせて変更し、JavaScriptの15行目を以下から変更する必要があります：私はこのコードは、長年にわたって保存されて持っていたと私は原作者がhttp://www.quirksmode.org/トンであると考えてい
```
var dragObj = e.target ? e.target.parentNode : e.srcElement.parentNode; 
```

：ような何かに

var dragObj = e.target ? e.target : e.srcElement;

私はもはやそれを見ない。このサイトでは、JSに関する素晴らしい情報がたくさんあります。繰り返しますが、これはクロスブラウザスクリプトであり、キャンバスを使用していることを前提としているかどうかわかりません。あなたがJSを使い慣れていなくてDOMを使っている人は、コードがちょっと混乱しているように見えます。追加の質問をすることをお勧めします。

出典

2011-12-29 02:19:19 skyline3000

うわー、サメラ、本当にあなたのものを知っている！ – DKean

しかし、私はそれを動作させることができません。あなたが提供したJSコードを、スクリプトタグの間にヘッダに配置しました。あなたが疑っているように、私はJSの全く新しいです！ – DKean

私はフィドルで、端に近いキャンバスをキャッチするとキャンバスが脱落するのを見ています。子を使って親をドラッグするように提案しました。私はFoxProでこの問題を見てきました。子供はフォームよりも速くマウスをたどり、親は決して脱落しません。それを期待して、あなたに誇りを持ってください。私が感銘を受けた。 – DKean

ブラウザの画面にキャンバスをドラッグアンドドロップする

答えて

関連する問題