1

複数のドラッグアンドドロップボックスがあるページがありますが、これはうまく機能しますが、機能しないのはボックス内のリンクです。誰かが私を助けてくれたら幸いです:)。だから私は人々がボックスをドラッグアンドドロップできるページを持っています（私が前に言ったようにそれはうまくいきます）、ボックス内のリンクもソート可能です、しかし私はそれらに値をmysqlに保存させることができないようです。2つのドラッグアンドドロップの間に競合があると思います。おそらく私はそれを間違ってやっています。なぜなら、私は以前にajaxとjqueryを使用したことがないからです。

//here is the jquery where I need to add some ajax
$(function() {
$('.dragbox-content').sortable({ 
  connectWith: '.dragbox-content',
  update: function(event, ui) {
        var order=$(this).attr('id');
        alert(order);  // I get the order alert and it has one value that I need, but I need the sort order aswell                         
  }
  });                 
});

//this is the <div> that has the links in them and mysql query that gets the values
//from two different databases, one is for the boxes and the other for links.
//boxes db id = links title_id
echo '<div class="dragbox-content" id="order'.$widget['id'].'"';'>''</div>';

$sql10 = "SELECT u.*, w.id, w.link_address, w.link_name FROM db_boxes u LEFT 
JOIN db_links w ON u.link_id = w.id  WHERE 
(u.username = '$username' AND u.link_id !='0' AND w.title_id = '".$widget['id']."' 
AND w.link_name !='pilt' AND w.rights = '0') OR 
(u.username = '$username' AND u.link_id !='0' AND w.title_id = '".$widget['id']."' 
AND w.link_name !='pilt' AND w.rights LIKE '%26%') ORDER BY w.id ASC";
      $result10 = mysql_query($sql10) or die (mysql_error());
      while ($row = mysql_fetch_array($result10)) {
        $link_id = $row['id'];
        $link_address = $row['link_address'];
        $link_name = $row['link_name'];
        $title_id = $row['title_id'];
      ?>
      <div class="move" id="<?php echo $link_id;?>">
      <span class="link_style">
      <div><a href="<?php echo $link_address; ?>"><?php echo $link_name;?>     </a></div</span></div>

ユーザーがそのページでクリックするたびに、ajaxを使用してtile_idとsort_orderをboxesデータベースに保存する方法を教えてくれる人が必要です。

4

1 に答える 1

0

以下の私の例を参照してください。

http://jsfiddle.net/gRoberts/vMy7r/

$(function () {
    $('ul').sortable({
        update : function(e, ui) {
            var ul = $(ui.item).closest('ul');
            var index = 0;
            var toPost = {};
            ul.find('> li').each(function() {
                index++;
                $(this).find('input').val(index);               
                toPost[$(this).find('input').attr('name')] = index;
            });                  
            $.ajax({
                url : '/echo/json/',
                data : toPost,
                type : 'POST',
                dataType : 'json',
                success : function(resp) {
                    alert(resp);
                },
                error : function() {
                    alert('There was a problem');
                }
            });
        }
    });
});
​

上記の例は2つの方法で使用できます。削除する$.ajaxと、非表示のフォームフィールドが更新され、通常どおり投稿できます。

于 2012-07-27T07:24:25.710 に答える