为什么我不能拖动剩余的盒子

时间:2014-03-27 00:10:42

标签: jquery jquery-ui-draggable

我正在尝试解决jquery draggable,有代码从数据库中检索信息,每个信息显示在每个数据库的每个BOX中。

像这样......

<?php
include('dbcon.php');

$product_id=$_POST['selector'];
$N = count($product_id);
for($i=0; $i < $N; $i++)
{
    $result = mysql_query("SELECT * FROM product where product_id='$product_id[$i]'");
    while($row = mysql_fetch_array($result))
      { ?>
      <div id="draggable" style="width:300px; height:200px">
      <div class="thumbnail">
    <div class="control-group">
    <label class="control-label" for="inputEmail">product id</label>
    <div class="controls">
    <input name="member_id[]" type="hidden" value="<?php echo  $row['product_id'] ?>" />
        <input name="firstname[]" type="text" value="<?php echo $row['product_name'] ?>" />
    </div>
    </div>

    <div class="control-group">
    <label class="control-label" for="inputEmail">product category</label>
    <div class="controls">
        <input name="lastname[]" type="text" value="<?php echo $row['product_category'] ?>" />
    </div>
    </div>
    </div></div>

      <?php 
      }
}

?>
<input name="" class="btn btn-success" type="submit" value="Update">
</form>
</div></div>

在jquery中

  $(function() {
    $( "#draggable" ).draggable();
  });

现在我想使用每个框的draggable,正如你在代码中看到的那样,它说id =“draggable”,

draggable非常好用,我只能拖动 FIRST BOX 但是它们超过一个盒子我将无法拖动其余的盒子,只能在第一个盒子里工作,为什么不用剩余的盒子呢?

我出了什么问题!

谢谢你的时间。

1 个答案:

答案 0 :(得分:0)

将可拖动ID更改为Class。 .draggable()仅应用于第一个,因为重复的ID无效。

while($row = mysql_fetch_array($result))
      { ?>
      <div class="draggable" style="width:300px; height:200px">
      <div class="thumbnail">
...

$(function() {
    $( ".draggable" ).draggable();
});