1

我试图让拖放正常工作，因为我为所有<li>标签分配了以下内容：

$('li').draggable( {
    containment: $selMemContainer,
    cursor: 'move',
    snap: $selMemContainer
  } );

<li>当我尝试将其中一个'拖放到另一个位置时，它<ul>会从显示中消失，但在 firebug 中查看时仍占据原始位置，但现在在样式定义中具有 left 和 top 值（见下文）。你可以看到我试图移动<li>项目 1,2 和 4，如果我去掉了 firebug 中的 left 和 top 值，那么它们会<li>重新出现在浏览器中。我怎样才能让拖放正常工作。

<div id="selMembersContainerDiverFieldAdmin2Photographs" class="membersContainer selMembersContainer" style="height: 351px;">
    <ul>
        <li class="ui-draggable" style="position: relative; left: -1237px; top: -309px;">
        <li class="ui-draggable" style="position: relative; left: -1237px; top: -353px;">
        <li class="ui-draggable" style="position: relative;">
        <li class="ui-draggable" style="position: relative; left: -1237px; top: -441px;">
        <li class="ui-draggable" style="position: relative;">
        <li class="ui-draggable" style="position: relative;">
    </ul>
</div>
4

3 回答 3

1

看来您需要使用可排序而不是可拖动。Sortable 使元素拖动并将它们包含到列表中。您还可以在列表之间拖动。

例子

于 2012-09-07T20:28:47.150 回答
0

您没有关闭li标签，但这可能根本不是问题，但应该是

<li class="ui-draggable" style="position: relative; left: -1237px; top: -309px;"></li>

每个都<li>需要一个结束标签，即

<li>Something</li>

您正在使用snap: $selMemContainer这看起来像一个问题，以帮助您找出问题这里是一个工作示例

HTML

<div id="selMembersContainerDiverFieldAdmin2Photographs" class="membersContainer selMembersContainer">
    <ul id="myUl">
        <li>Something</li>
        <li>Something Else</li>
        <li>Something More</li>
    </ul>
</div>

JS

$(function(){
    var $selMemContainer=$('#selMembersContainerDiverFieldAdmin2Photographs');
    $('li').draggable( {
        containment: $selMemContainer,
        cursor: 'move',
        snap:true
    });
});​

演示。

于 2012-09-07T20:31:01.093 回答
0

我正在尝试让拖放正常工作

这并不能告诉我们您的确切期望。

仅使用 draggable 使您的项目可拖动。这可以通过默认使用简单地实现：

var $selMemContainer = $(".selMembersContainer");    
$('li').draggable();​

这允许您现在在屏幕上移动项目。

但是，如果您试图实现在ul您需要可排序的范围内移动项目。

基本的可排序功能如下所示（将可排序的 id 分配给 ul）：

$("#sortable").sortable({
    revert: true
});

DEMO - 基本的可拖动项目和基本的可排序列表

如上所述，目前还不是很清楚你到底想要达到什么目标。以上应该可以帮助您入门，如果您有任何问题，请随时详细说明。

其他资源

于 2012-09-07T20:40:26.093 回答