Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> Przeciąganie elementu
borpaw
post 18.07.2013, 07:33:37
Post #1





Grupa: Zarejestrowani
Postów: 439
Pomógł: 0
Dołączył: 3.06.2010

Ostrzeżenie: (50%)
XXX--

Używam jquery UI draggable, do przesuwania elemenu w obrębie pola <div>

Chodzi mi o to w jaki sposób zrobić blokadę przesuwania elementu jeśli kursor myszy znajdzie się poza wyznaczonym polem?

[HTML] pobierz, plaintext 
  1. <html lang="en">
  2.    <head>
  3.       <meta charset="utf-8" />
  4.  
  5.       <link rel="stylesheet" href="css/jquery-ui.css" />
  6.       <script src="jquery.js"></script>
  7.       <script src="jquery-ui.js"></script>
  8.       <link rel="stylesheet" href="css/style.css" />
  9.  
  10.    </head>
  11.  
  12.    <body>
  13.       <div class="container-border">
  14.          <div class="container">
  15.             <div id="draggable" class="draggable ui-widget-content"></div>
  16.          </div>
  17.       </div>
  18.    </body>
  19.  
  20.    <script>
  21.  
  22.       $(function() {
  23.  
  24.          $("#draggable").draggable({
  25.             containment: "parent",
  26.             snap: true,
  27.             grid: [10, 10]
  28.          });
  29.  
  30.       });
  31.  
  32.    </script>
  33.  
  34. </html>
[HTML] pobierz, plaintext 


[PHP] pobierz, plaintext 
  1. *{
  2.   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  3.   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  4.   box-sizing: border-box;         /* Opera/IE 8+ */
  5. }
  6.  
  7. body{
  8.    margin:0;
  9.    padding:0;
  10.    font-family: Arial;
  11.    font-size:12px;
  12.    width:auto;
  13.    height:auto;
  14.    margin: 0 auto 0 auto;
  15.    background: #fff;
  16.    padding-top: 10px;
  17.    color:#333333;    
  18. }
  19.  
  20. h1, h2, h3, h4, h5, h6, h7, h8, form, input, textarea, select, p{
  21.   margin: 0px;
  22.   padding: 0px;
  23. }
  24.  
  25. a{
  26.   text-decoration: none;
  27.   color: #277093;
  28. }
  29.  
  30. /*===============================================================================
    =================*/
  31.  
  32. #draggable { width: 200px; height: 30px; }
  33.  
  34. .container-border{
  35.    height: 802px;
  36.    width: 602px;
  37.    border: 1px solid red;
  38.    margin: 0 auto 0 auto;
  39. }
  40.  
  41. .container{
  42.    height: 800px;
  43.    width: 600px;
  44. }
  45.  
  46. .draggable{
  47.    border: 1px solid #DDDDDD;
  48.    position: absolute;
  49. }
  50.  
  51. .box {
  52.    position: absolute;
  53.    height: 98px;
  54.    width: 98px;
  55.    background: #CCF;
  56.    border: 1px solid #AAD;
  57.    text-align: center;
  58.    font-size: 10px;
  59.    cursor: move;
  60. }
[PHP] pobierz, plaintext
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 18.06.2024 - 02:59
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn