12

Webページ内のSVG要素からドラッグアンドドロップイベントを受け取る可能性はありますか？

私はGoogleClosureライブラリを試しましたが無駄でした。

具体的には、私のページに次のものが含まれているとします

<ul id = "list">
  <li class="item" id="item1">foo</li>
  <li class="item">bar</li>
  <li class="item">baz</li>
</ul>

そして私のスクリプトには（Clojurescript / C2）が含まれています

(let [items (select-all ".item")
      lst (select "#list")
      target (fx/DragDrop. lst nil)]
  (dorun (map
    (fn [item]
      (let [source (fx/DragDrop. item nil)]
        (. source (addTarget target))
        (. source (init))))
    items))
  (. target (init)))

次に、ドラッグイメージ（ゴースト）を取得しますが、ドラッグイベントを受信することはできません。

(on-raw "#item1" :dragstart (fn [e] (.log js/console (str "dragstart " e))))

SVG要素に同様のコードを使用すると、ゴーストも発生しません...

ヒントはありますか？

ありがとう

4

2 に答える 2

21

ドラッグイベントはSVG要素ではサポートされていません：http ：//www.w3.org/TR/SVG/svgdom.html#RelationshipWithDOM2Events 。

マウスイベントを使用してドラッグイベントを偽造することができます。http：//svg-whiz.com/svg/DragAndDrop.svg（ソースを表示）を参照してください。

于 2012-09-05T19:10:30.760 に答える
2

いつでも実装できます。基本的に、ドラッグしているときに要素が別の要素に接触しているかどうかを確認する必要があります。

this.isTouching = function(element){
        if(this.x <= element.x && element.x <= (this.x + this.width) && 
           this.y <= element.y && element.y <= (this.y + this.height)){
           return true;
        }else{
            return false;
        }
    };

そして、それはすべてのブラウザで動作します。それが役に立てば幸い ：）

于 2015-07-29T05:46:19.920 に答える