jQueryの - ドラッグ可能なジャンプコンテナは最初の試み

Question

に私はドラッグ可能とコードポップアップがトップと左のコーナーにジャンプしますまずドラッグで

でポップアップを作るためにjQueryのUIを使用しています。

$(".box").css({"top": 0, 
 
       "bottom": 0, 
 
       "left": 0, 
 
       "right": 0, 
 
       "margin": "auto" 
 
       }); 
 
       
 
$(".box").draggable();

.box{ 
 
    
 
    left:0px; 
 
    top:0px; 
 
    right:0px; 
 
    bottom:0px; 
 
    width: 150px; 
 
    height: 150px; 
 
    box-shadow: inset 0 0 20px; 
 
    position:fixed; 
 
} 
 

 
#containment-wrapper{ 
 
    width:300px; 
 
    height:300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="containment-wrapper"> 
 
    <div class="box"></div> 
 
</div>

enter link description here

Answer 1

あなたは0,0にその位置を設定しているので、それはCSSの位置はあなたの問題を解決します削除しています。あなたのコードでjqueryUIを含める必要が

/*$(".box").css({"top": 0, 
 
      "bottom": 0, 
 
      "left": 0, 
 
      "right": 0, 
 
      "margin": "auto" 
 
});*/ 
 
$(".box").draggable();

.box { 
 
    /*left:0px; 
 
    top:0px; 
 
    right:0px; 
 
    bottom:0px;*/ 
 
    float: left; 
 
    margin: auto; 
 
    width: 100px; 
 
    height: 100px; 
 
    box-shadow: inset 0 0 20px; 
 
    position: fixed; 
 
} 
 

 
#containment-wrapper { 
 
    width: 300px; 
 
    height: 300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
<div id="containment-wrapper"> 
 
    <div class="box"></div> 
 
</div>

Answer 2

。

$(".box").css({"top": 0, 
 
        "bottom": 0, 
 
        "left": 0, 
 
        "right": 0, 
 
        "margin": "auto" 
 
        }); 
 
        
 
    $(".box").draggable();

.box{ 
 
     
 
     left:0px; 
 
     top:0px; 
 
     right:0px; 
 
     bottom:0px; 
 
     width: 150px; 
 
     height: 150px; 
 
     box-shadow: inset 0 0 20px; 
 
     position:fixed; 
 
    } 
 

 
    #containment-wrapper{ 
 
     width:300px; 
 
     height:300px; 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
    <div id="containment-wrapper"> 
 
     <div class="box"></div> 
 
    </div>

Answer 3

@Rohanクマーが正しく指摘するように、あなたは間違ってCSSを設定しているので、それはですが、彼のソリューションは、あなたの.topを残して、0PXで.LEFTでしょう。

CSSを設定する理由は何ですか？私の推測は、あなたがそれをある場所からドラッグ可能にしたいからです。このような方法でそれを達成するための.cssファイルを編集します。

$(".box").draggable();

.box{ 
 
    left: 100px; 
 
    top: 100px; 
 
    width: 150px; 
 
    height: 150px; 
 
    box-shadow: inset 0 0 20px; 
 
    position:fixed; 
 
} 
 

 
#containment-wrapper{ 
 
    width:300px; 
 
    height:300px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<div id="containment-wrapper"> 
 
    <div class="box"></div> 
 
</div>

Answer 4

** uはCSSプロパティのトップを設定し、「0」として残されているので、それが左上に起こっているので、そのが強行上を移動することの.cssメソッドを削除し、その後uが正常に **