Question

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

jquery ui code

<div>

HTML

$(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']);
                  }                                    
            })
      }

jquery代码位于<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">  <? 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>内，并且在检索到数据库数据后立即运行。

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"
          });
});

也为其他功能做同样的事情

jQuery UI从sql中删除/拖动数据不可拖动/可拖放

2 个答案: