removeAttr（）とremove（）が機能しない

Question

とremove()を使用して<div>を削除しても動作しないようです。 $（ '＃div1'）。removeAttr（ 'style'）。remove（）; javascriptの最後の行で、<div>がほんの一瞬しか表示されないはずですか？ JavaScriptがイベント駆動型プログラミングかトップダウン型プログラミングかどうかはわかりません。または、コードに依存します。

新しい<div>をドラッグする前に、いつでも<div>を削除して消去したいので、私はその行をどこにでも置こうとしますが、動作しません。

私はコンピュータサイエンスではありません、私の無知を許してください。しかし、最後の行がなぜ実行されないのか分かりません。 お手伝いできれば幸いです。どうもありがとうございました。

マイコード：

$(document).ready(function() { 
 
    var dragging = false; 
 
    var clickedX, clickedY; 
 

 
    // right click event 
 
    $("#displayWindow").mousedown(function(e) { 
 
    // when the mouse is pressed, the div is appended to the displayWindow 
 
    if (e.button == 2) { 
 
     // append the div start at the location that we click 
 
     $("#displayWindow").append("<div id='div1'></div>"); 
 
     // get the coordinate where we clicked and set the div begin with that position 
 
     clickedX = e.pageX; 
 
     clickedY = e.pageY; 
 
     $('#div1').css({ 
 
     top: clickedY, 
 
     left: clickedX 
 
     }); 
 
     dragging = true; 
 
     return false; 
 
    } 
 
    }); 
 

 
    // holding on the mouse button, change the size of the div 
 
    $("#displayWindow").on("mousemove", function(e) { 
 
    if (dragging) { 
 
     var mouseOnX = e.pageX; 
 
     var mouseOnY = e.pageY; 
 
     // allow user drag the selection box in 4 different direction 
 
     $('#div1').css({ 
 
     top: Math.min(clickedY, mouseOnY), 
 
     left: Math.min(clickedX, mouseOnX), 
 
     height: Math.abs(mouseOnY - clickedY), 
 
     width: Math.abs(mouseOnX - clickedX) 
 
     }); 
 
    } 
 
    }); // end on 
 

 
    $(document).on("mouseup", function(e) { 
 
    dragging = false; 
 
    }); 
 

 
    // when clicked again, the menu fade out, and the div disappear 
 
    $(document).click(function(e) { 
 
    if (e.button == 0) { 
 
     // remove the selection box div 
 
     $('#div1').remove(); 
 
    } 
 
    }); 
 

 
    // prevent the default contextmenu on the display window 
 
    document.getElementById('displayWindow').oncontextmenu = function() { 
 
    return false; 
 
    }; 
 
}); // end ready

\t #displayWindow { 
 
\t background-color: white; 
 
\t border: 1px solid; 
 
\t height: 600px; 
 
\t width: 800px; 
 
\t } 
 
\t #div1 { 
 
\t background-color: lightgreen; 
 
\t position: absolute; 
 
\t opacity: 0.3; 
 
\t } 
 
\t

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div id="displayWindow"> 
 
    <svg height="130" width="150" style="position:absolute; left:200; top:200;" class="ui-widget-content"> 
 
    <text fill="black" x=75 y=75 style="text-anchor: middle">1</text> 
 
    <path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z"/fill="none" stroke="blue"> 
 
    </svg> 
 
</div>

Answer 1

あなたが持っている問題は除去していません。問題は、次のとおりです。

• あなたはmousemoveイベント、あなたは右クリックごと時間にイベントハンドラを追加します。これは正しくない。 mousemoveハンドラを一度だけバインドする必要があるため、そのコードをmousemoveイベントハンドラの外に移動してください。結果として、clickedXとclickedYの変数もreadyファンクションレベルで宣言します。
• mousemoveイベントは、ボタンが押されたことに関する情報を提供しないので、e.buttonは常に0になります。代わりに、マウスボタンが変数で押されたかどうかを追跡し、文書上でmouseupイベントが検出されたときにその変数をリセットする必要があります。これは完璧ではありませんが、おそらく十分です。

他のいくつかの注意事項：

• はdiv追加にはstyle属性を持っていないので、removeAttr('style')を行うには効果がありません。ただし、remove()が動作します。
• 複数のcssスタイルを1つのcss()コールで変更するには、キーと値のペアを持つオブジェクトを渡します。
• trueをイベントハンドラから戻すことはありません。
• ユーザーはコメントで4方向すべてをドラッグできると言いますが、ボックスを1つの象限で移動することのみが許可されています。 Math.minとMath.absの組み合わせで4方向をサポートできます。ここで

は、いくつかの適応コードです：

$(document).ready(function() { 
 
    var dragging = false; 
 
    var clickedX, clickedY; 
 
    // right click event 
 
    $("#displayWindow").mousedown(function(e) { 
 
     // when the mouse is pressed, the div is appended to the displayWindow 
 
     if (e.button == 2) { 
 
      $('#div1').remove(); // remove div that might still be there. 
 
      // append the div start at the location that we click 
 
      $("#displayWindow").append("<div id='div1'></div>"); 
 
      // get the coordinate where we clicked and set the div begin with that position 
 
      clickedX = e.pageX; 
 
      clickedY = e.pageY; 
 
      $('#div1').css({top: clickedY, left: clickedX}); 
 
      dragging = true; 
 
      return false; 
 
     } 
 
    }); 
 

 
    // holding on the mouse button, change the size of the div 
 
    $("#displayWindow").on("mousemove", function(e) { 
 
     if (dragging) { 
 
      var mouseOnX = e.pageX; 
 
      var mouseOnY = e.pageY; 
 
      // allow user to drag the selection box in 4 different directions 
 
      $('#div1').css({ 
 
       top: Math.min(clickedY, mouseOnY), 
 
       left: Math.min(clickedX, mouseOnX), 
 
       height: Math.abs(mouseOnY - clickedY), 
 
       width: Math.abs(mouseOnX - clickedX) 
 
      }); 
 
     } 
 
    }); 
 

 
    $(document).on("mouseup", function(e) { 
 
     dragging = false; 
 
    }); 
 
    
 
    // when clicked the div disappears 
 
    $(document).click(function(e) { 
 
     if (e.button == 0) { 
 
      // remove the selection box div 
 
      $('#div1').remove(); 
 
     } 
 
    }); 
 

 
    // prevent the default contextmenu on the display window 
 
    document.getElementById('displayWindow').oncontextmenu = function() { 
 
     return false; 
 
    }; 
 

 
    $('#div1').remove(); 
 
}); // end ready

\t #displayWindow { 
 
\t background-color: white; 
 
\t border: 1px solid; 
 
\t height: 600px; 
 
\t width: 800px; 
 
\t } 
 
\t #div1 { 
 
\t background-color: lightgreen; 
 
\t position: absolute; 
 
\t opacity: 0.3; 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="displayWindow"> 
 
    <svg height="130" width="150" style="position:absolute; left:200; top:200;" class="ui-widget-content"> 
 
    <text fill="black" x=75 y=75 style="text-anchor: middle">1</text> 
 
    <path d="M38 0 L113 0 L150 65 L113 130 L38 130 L0 65 Z"/fill="none" stroke="blue"> 
 
    </svg> 
 
</div>