1. дома
  2. Вопрос и ответ
  3. jquery draggable

jquery draggable

2009-06-23 2 views
1

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

PLS помочь мне.

код:

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

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

#draggable является DIV, который содержит, IMG и #draggable прилагается к imgContainer. Надеюсь, это поможет.

источник

2009-06-23 amit

+1

Покажите нам код и помощь прибежит, как летучая мышь из ада , – karim79

+0

@ karim79: LOL, правда правда. – Sev

ответ

2

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

<!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>

источник

2009-06-24 01:17:31 Sampson

+0

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

+0

amit - я обновил код, чтобы включить изображение, большее, чем контейнер, и использовал переполнение: скрытый в контейнере. Основное различие - значение сдерживания - на этот раз вы используете серию графиков, [x1, y1, x2, y2]. – Sampson

+0

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

Смежные вопросы

 Смежные вопросы