2016-05-03 8 views
1

私はドラッグの作業を行っています&ドロップドロップ可能な領域にオブジェクトをドラッグすると、ネガティブな位置としてネガ領域に移動した動きがオブジェクトに与えられます。負の位置を適用するドラッグ&ドロップ

これを説明する目的で、私はこの問題を説明するために提供された風景にかわいい犬を落とすことができるJSFiddleをまとめました。私は、変数のエラーを封じ込めに属するように見えるその多くがこの問題を修正する方法についての彼女に読んでの良い取引を行ってきた

//DRAG & DROP 
$(document).ready(
    function() { 
     var a = 3; 
     $('.drag').draggable({ 
     revert: 'invalid', 
     cursor: 'move', 
     //containment: '#drop', 
     start: function(event,ui) { $(this).css("z-index", a++)} 
     }); 

     $('#drop').droppable({ 
     accept: ".drag", 
     drop: function(event, ui) { 
      console.log(this); 

      //$(this).addClass('dropped'), 
      $(this).append(ui.draggable); 
     } 
     }); 
}); 

、残念ながら私はそれらを実装する全くの幸運を持っていたしました:コードは、以下の使用しますここに私自身の設定に修正されます。注意すべき点は、HTML2CANVASを使用してこの#dropエリアのショットをエクスポートするので、移動したアイテムが物理的にスペースにあることを確認する必要があることです。任意の提案をいただければ幸いです。

ありがとうございます!

+0

は[これ](https://jsfiddle.net/arj_dev/f7fzwpkL/1/)です。 – ArJ

+0

犬が目に見えるという意味で、はい。その結果の問題は、犬が元のスペースコードに賢明に留まり、#dropスペースに挿入されていないことです。物理的にドロップスペースに入ることなく、私が言及したHTML2CANVASはイメージをキャプチャしません。 – Cutter

+0

キャンバスにドロップした後にキャンバスに描画したい場合は、キャンバス上でマウスの座標を検出し、キャンバス上のその位置にある** drop **イベントハンドラからイメージを描画することができます。これがあなたが望むものなら、私はフィドルを試すことができます。 – ArJ

答えて

0

更新;私は絶対的な位置付けを強制することでこれを解決することができました。応答しませんが、私はこのインスタンスのために必要なのか100%確信していません。

関連する問題