ダイナミックにdiVを追加し、ドラッグ機能を実現

1632 ワード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script>
   function creatediv()
   {
        var obj = document.createElement("div");
  classA.call(obj);  
  bd.appendChild(obj);
   }
 
 function classA(){
   
  this.style.width="100";
  this.style.height="100";
  this.style.background="blue";
  this.style.border="solid 10 red ";
  //this.style.display="inline";
  this.style.position="absolute";   //relative
  //   this.style.left=50;
  //   this.style.top=50;
  this.onmousedown=function()
                   {down(this)};
  this.onmousemove=function()
                   {move(this)};
  this.onmouseup=function()
                    {up(this)};

  
 }
 
 var flag=0;
 function down(aa){
  flag=1;
 }
 function move(aa)
 {
     if(flag==1)
  {
         aa.style.left=event.x-50;
   aa.style.top=event.y-50;
   }
 }
 function up(aa){
  flag=0;
 }
</script>
</HEAD>

<BODY id="bd" >
<input type ="button"  onclick="creatediv();"  value=" " /> 
</BODY>
</HTML>

down(),move(),up()の3つの関数はドラッグ機能を実現しています!実はあなたはそれを必要としません.

callメソッドはコールバックメソッドで、callをクリックするたびにclassA()という関数をコールバックします.

WPF Example: XmlDataProvider & Editable ComboBox

Javascript_30_16