jQuery的可拖動的跳躍集裝箱第一次嘗試

我使用JQuery用戶界面，使一個彈出可拖動並在代碼jQuery的可拖動的跳躍集裝箱第一次嘗試

在第一拖曳彈出跳轉到頂部和左側的角落。

$(".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

來源

2017-04-13 Diwakar DJ

可以在這一些幫助米EOUT ... 這裏的問題可再現鏈接 http://jsfiddle.net/9dx1cxu8/ 47/ –

http://jsfiddle.net/9dx1cxu8/47/ –

這是因爲你設置它的位置0,0刪除CSS位置將解決您的問題。

/*$(".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>

來源

2017-04-13 12:16:03

你需要在你的代碼jqueryUI。

$(".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>

來源

2017-04-13 12:18:42 vijay

由於@Rohan庫馬爾正確地指出，這是因爲你錯誤地設置了CSS的，但他的解決辦法離開你.TOP和0像素。左。

你爲什麼要設置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>

來源

2017-04-13 12:19:04

**這是要左上方因爲u必須設置CSS屬性頂部和左側爲「0」，所以其運動那邊強制刪除的CSS方法然後ü可以將它正常 **

來源

2017-04-14 11:27:48

jQuery的可拖動的跳躍集裝箱第一次嘗試

回答

相關問題