jQuery UI Drop/Drag 来自 sql 的数据不可拖动/droppable

Question

我正在使用jqueryui.com 提供的Photo Manager 示例玩jQuery UI Drop/Drap。我想要实现的是将它作为一个照片管理器，但使用从 sql 数据库自动生成的数据。我已经设法用数据库中的数据填充可拖动的<div>，并且可以像示例中一样将图像拖放到可拖放的<div> 中，所以我将该数据存储回数据库（不同的表）中，所以下一个当用户重新登录或刷新页面时，他们将能够看到已丢弃在可放置<div> 中的图像，到目前为止一切都很好。问题是为可拖放<div> 生成的数据不可拖动，只有从可拖动<div> 中拖放而没有刷新页面的图像才可拖放到可拖动<div>。

jquery ui 代码

$(function() {

      var $available_for_share = $( "#available-for-share" ),
      $currently_sharing = $( "#currently-sharing" );

      // let the available_for_share items be draggable
      $( "li", $available_for_share ).draggable({
            cancel: "a.ui-icon", // clicking an icon wont initiate dragging
            revert: "invalid", // when not dropped, the item will revert back to its initial position
            containment: $( "#sharing" ).length ? "#sharing" : "document", // stick to demo-frame if present
            helper: "clone",
            cursor: "move"
      });

      // let the available_for_share be droppable as well, accepting items from the currently-sharing
      $available_for_share.droppable({
            accept: "#currently-sharing  li",
            activeClass: "custom-state-active",
            drop: function( event, ui ) {
                  currently_sharing( ui.draggable );
            }
      });

      // let the currently-sharing be droppable, accepting the available_for_share items
      $currently_sharing.droppable({
            accept: "#available-for-share > li",
            activeClass: "ui-state-highlight",
            drop: function( event, ui ) {
                  available_for_share( ui.draggable );
            }
      });


      function available_for_share( $item ) {
            var arr = {};
            arr['list_id'] = list_id();
            arr['share_with'] = $item.attr('id');
            $.post('<?= site_url() ?>/lists/js_share_with', arr,function(str){
                  str = $.parseJSON(str);
                  if(str['status'] == 0){
                        info_bar(str['status'],str['msg']);
                  } else {
                        info_bar(str['status'],str['msg']);
                        $item.fadeOut(function() {
                              var $list = $( "ul", $currently_sharing ).length ?
                                    $( "ul", $currently_sharing ) :
                                    $( "<ul class='available-for-share ui-helper-reset'/>" ).appendTo( $currently_sharing );
                              $item.find( "a.ui-icon-trash" ).remove();
                              $item.appendTo( $list ).fadeIn();
                        });
                  }
            })

      }


      function currently_sharing( $item ) {
            var arr = {};
            arr['list_id'] = list_id();
            arr['stop_sharing'] = $item.attr('id');
            $.post('<?= site_url() ?>/lists/js_stop_sharing', arr,function(str){
                  str = $.parseJSON(str);
                  if(str['status'] == 0){
                        info_bar(str['status'],str['msg']);
                  } else {
                        $item.fadeOut(function() {
                              $item
                              .appendTo( $available_for_share )
                              .fadeIn();
                        });
                        info_bar(str['status'],str['msg']);
                  }                                    
            })
      }

HTML

<div id="sharing" class="col3 center">

<h2>Share this list</h2>
<span style="font-size:0.8em;">Drag and drop at the bottom box the images you want to share.</span>
<br />
<? if (is_array($available)) : ?>
      <div class="ui-widget ui-helper-clearfix">
            <hr>
            <span style="font-size:0.8em;">available for sharing</span><br />
            <ul id="available-for-share" class="available-for-share ui-helper-reset ui-helper-clearfix  ui-state-default">&nbsp;
                  <? foreach ($available as $k) : ?>
                        <li id="<?= $k['imageID'] ?>" class="ui-widget-content ui-corner-tr">
                              <img src="http://somedomain/images/<?= $k['imageID'] ?>_64.jpg" alt="<?= $k['imageName'] ?>" width="52" height="52" />
                        </li>

                  <? endforeach ?>
            </ul>
            <span style="font-size:0.8em;">shared with</span><br />
            <div id="currently-sharing" class="ui-widget-content ui-state-default ui-droppable">
                  <? if (is_array($currently_sharing_with)) : ?>
                        <ul class="available-for-share ui-helper-reset">
                        <? foreach ($currently_sharing_with as $k) : ?>
                              <li id="<?= $k['imageID'] ?>" class="ui-widget-content ui-corner-tr ui-draggable" style="display: list-item;">
                                    <img src="http://somedomain/images/<?= $k['imageID'] ?>_64.jpg" alt="<?= $k['imageName'] ?>" width="52" height="52" />
                              </li>
                        <? endforeach ?>
                        </ul>
                  <? endif ?>
            </div>

      </div>

<? else : ?>
      <p>No images</p>
<? endif ?>

</div>

jquery 代码在<script> 内，它在检索到数据库数据后立即运行。

Answer 1

找到了解决方案，我必须让$currently_sharing 也可以拖动，它只能拖放。

  // let the $currently_sharing items be draggable
  $( "li", $currently_sharing ).draggable({
        cancel: "a.ui-icon", // clicking an icon won't initiate dragging
        revert: "invalid", // when not dropped, the item will revert back to its initial position
        containment: $( "#sharing" ).length ? "#sharing" : "document", // stick to demo-frame if present
        helper: "clone",
        cursor: "move"
  });

Answer 2

尝试使用 livequery 插件 http://docs.jquery.com/Plugins/livequery 。可能您需要对新添加的元素使用live 函数。

$( "li", $available_for_share ).livequery(function(){
         $(this).draggable({
            cancel: "a.ui-icon", 
            revert: "invalid", 
            containment: $( "#sharing" ).length ? "#sharing" : "document", 
            helper: "clone",
            cursor: "move"
          });
});

对其他功能也这样做