Jquery Draggable - PullRequest
Новая
       13

Jquery Draggable

1 голос
/ 24 июня 2009

У меня есть div, который я хочу перетащить в конкретном контейнере. я попытался использовать параметр containerment: parent, но это приводит к тому, что div переходит на верхнюю или нижнюю границы без перетаскивания у меня переполнение: скрытый набор, я надеюсь, что это не проблема. (я где-то читал)

Пожалуйста, помогите мне.

код: 

imgCanvas.appendChild(img); 
overlay.appendChild(imgContainer);

$(document).ready(function() { 
  $("#draggable").draggable({
    containment: '#imgContainer', 
    scroll: false
  });                                                       
});

#draggable - это div, содержащий img, а #draggable добавляется в imgContainer. я надеюсь, что это поможет как-то.

Ответы [ 2 ]

2 голосов
/ 24 июня 2009

Следующее прекрасно работает для меня (хотя вам придется изменить графики содержания, чтобы они соответствовали размерам ваших перетаскиваемых элементов): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
  <head>
    <title>jQuery</title>
      <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

        <script type='text/javascript'>

          $(document).ready(function(){
            $("#draggable").draggable({
              containment: [-150,-150,0,0],
              scroll: 'false'
            });
          });

        </script>
        <style type="text/css">
          #container {
            width:200px;
            height:200px;
            border:1px solid #cccccc;
            overflow:hidden;
          }
          #draggable {
            width:359px;
            height:359px;
            background:#cc0000 url("http://www.sudoku.4thewww.com/Grids/grid.jpg");
          }
        </style>
      </head>
    <body>

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

    </body>
</html>
0 голосов
/ 13 октября 2009

Я недавно столкнулся с этой же проблемой. Я извлек свой код в плагин, который, я думаю, делает именно то, что вам нужно ...

подробности здесь:

http://webpangea.blogspot.com/2009/10/draggable-scrolling-list-with-jquery.html

...