Question

我有一个div的网格，我必须使用sortable和draggable 当我想要对它们进行排序时，我得到了这个错误

> Uncaught TypeError: Cannot read property 'replace' of undefined
>     at Function.camelCase (jquery-3.1.1.min.js:2)
>     at Function.css (jquery-3.1.1.min.js:3)
>     at r.fn.init.<anonymous> (jquery-3.1.1.min.js:3)
>     at S (jquery-3.1.1.min.js:3)
>     at r.fn.init.css (jquery-3.1.1.min.js:3)
>     at HTMLDivElement.<anonymous> (jquery-asortable.js:55)
>     at HTMLDivElement.dispatch (jquery-3.1.1.min.js:3)
>     at HTMLDivElement.q.handle (jquery-3.1.1.min.js:3)
>     at Object.trigger (jquery-3.1.1.min.js:4)
>     at HTMLDivElement.<anonymous> (jquery-3.1.1.min.js:4)

我使用asortable因为我绝对定位的物品我的scripts.js

$( "#sortable" ).sortable({
  revert: true
});
$( "#sortable" ).draggable({
  connectToSortable: "#sortable",
  helper: "clone",
  revert: "invalid"
});

和我的HTML：

<div id="sortable">

        <div class="div div1 ui-state-default">div1</div>
        <div class="div div2 ui-state-default">div2</div>
        <div class="div div3 ui-state-default">div3</div>
        <div class="div div4 ui-state-default">div4</div>
        <div class="div div5 ui-state-default">div5</div>
        <div class="div div6 ui-state-default">div6</div>
    </div>

我可以抓住一个项目，但不能用另一个项目进行更改，因为它会弹出上面的错误。谢谢你的帮助

问题斯洛伐克!!! 几个小时后，我解决了这个问题。 :)
这些div是由.append（）生成的，所以我为每个生成的div添加了行.asortable（'refresh'）并且它正在工作。
工作示例（div绝对定位）scripts.js：

$( "#sortable" ).sortable({
  revert: true
});
for(var i=1; i<=10; i++) {
    var dataBlock = Mustache.render('<div class="module-{{id}}">{{id}}</div>',{id:i})
    $('#sortable').append(dataBlock);
    $('#sortable').asortable('refresh');
}

也许有人会使用一个有效的例子。

Answer 1

应该这样定义。其中id为sortable的div为容器，而具有类.div.div1的div为可拖动项。在您的问题中，它使容器也可以排序。

＆＃13;

$("#sortable").sortable({
  revert: true
});
$("div.div.div1").draggable({
  connectToSortable: $('#sortable'),
  helper: "clone",
  revert: "invalid"
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>

<div id="sortable">

  <div class="div div1 ui-state-default">div1</div>
  <div class="div div2 ui-state-default">div2</div>
  <div class="div div3 ui-state-default">div3</div>
  <div class="div div4 ui-state-default">div4</div>
  <div class="div div5 ui-state-default">div5</div>
  <div class="div div6 ui-state-default">div6</div>
</div>

＆＃13;

未捕获的TypeError：无法读取未定义的jQuery draggable + sortable属性'replace'

1 个答案: