Перетащите div за ручку, которая не является вложенной - PullRequest
Новая
       1

Перетащите div за ручку, которая не является вложенной

2 голосов
/ 21 апреля 2011

В перетаскиваемой демонстрации JQueryUI я вижу, что вы можете прикрепить дескриптор к DIV, но если дескриптор не вложен в родительский DIV, который можно перетаскивать, он не работает, например, 

<script src="jquery-1.5.2.js"></script>
  <script src="js/jquery-ui-1.8.11.custom.min.js"></script>

  <style>    
    #hBlack
    {
        width:55px;
        height:55px;
        background-color: black;
        top:0px;
    }

    #hGreen
    {
        width:25px;
        height:25px;
        background-color: green;


    }
  </style>
  <script language="javascript" type="text/javascript">
    $(function() {
      $("#hBlack").draggable({handle:"#hGreen"});
      });
  </script>
</head>

<body>
  <div id="hBlack">
</div>
<div id="hGreen"></div>

Вышеуказанное не делает ручку #hGreen - но следующее делает: 

<div id="hBlack">
  <div id="hGreen"></div>
</div>

По сути, я пытаюсь сделать один DIV ход, когда другой движется - я думаю, вы можете сделатьэто с помощью новой утилиты Position , но для новичка, такого как я, я нахожу это плохо документированным

1 Ответ

3 голосов
/ 21 апреля 2011

Одним из возможных решений может быть размещение ручки внутри, но используйте css для ее позиционирования снаружи.

Javascript: 

$("#draggable").draggable({handle:"#handle"});

HTML: 

 <div id="draggable">draggable
<div id="handle">handle</div>
 </div>

CSS: 

#draggable{
display: block; 
height: 300px; 
width: 600px; 
background-color: gray;
}
#handle{
display: block; 
height: 50px; 
width: 600px; 
background-color: green;
position: relative;
top: -30px;
}

В противном случае вам, возможно, придется сделать что-то похожее на перетаскиваемый мультиселектор. Как перетащить несколько элементов одновременно с помощью JavaScript или jQuery?

...