JQuery UI 可排序/可拖动克隆不起作用

发布于 2024-10-05 22:06:02 字数 924 浏览 7 评论 0原文

大家好，我正在使用 UI 进行一些拖放操作，问题是我无法启动“克隆”。

我有 2 个

列表，我想从列表 1 拖动到列表 2 好吧，这很容易，但是得到“克隆”保留在列表一中不是。我需要/想要发生的事情是从列表 1 拖动到列表 2（仅单向拖动），然后在列表 2 中接收时隐藏删除拖动的项目 - 好吧听起来很奇怪，但拖动项目的 ID 会根据该 ID 加载页面ID 到第二个

到目前为止，“我们”看起来像这样：

 $('ul#inputs_menu li ul').sortable({

connectWith: "ul#layout_form",

}).disableSelection();

$('ul#inputs_menu li ul li').sortable({

helper: "clone"

}).disableSelection();


$(' ul#layout_form' ).sortable({

receive: function(event, ui) {

var new_item = (ui.item).attr('id');

$('ul#layout_form').append('<li><div id="'+new_item.substr(4)+'"class="'+new_item.substr(4)+' inputs radius_10" ></div></li>');

$('#'+new_item.substr(4)).load('includes/text.php?fld_name='+new_item.substr(4));

}

}).disableSelection();

请提出建议 - 谢谢

原文

Hi folks am using UI fro some drag drop, problem is that I cannot get the "clone" to fire.

I have 2 <ul><li></li></ul> lists and I want to drag from list 1 to list 2 OK that bit is easy, but getting the "clone" to remain in list one is not. What I need / want to happen is drag from list 1 to list 2 (one way drag only), then on receive in list 2 hide remove the dragged item - OK sounds strange but the ID of the dragged item loads a page based on that ID into the created "empty" <li> in the 2nd <ul>

So far "we" looking something like this:

 $('ul#inputs_menu li ul').sortable({

connectWith: "ul#layout_form",

}).disableSelection();

$('ul#inputs_menu li ul li').sortable({

helper: "clone"

}).disableSelection();


$(' ul#layout_form' ).sortable({

receive: function(event, ui) {

var new_item = (ui.item).attr('id');

$('ul#layout_form').append('<li><div id="'+new_item.substr(4)+'"class="'+new_item.substr(4)+' inputs radius_10" ></div></li>');

$('#'+new_item.substr(4)).load('includes/text.php?fld_name='+new_item.substr(4));

}

}).disableSelection();

Suggestions please - thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝眼睛不忧郁 2024-10-12 22:06:02

您需要这里的 ui.helper，而不是原始的 ui.item，它是克隆版本。此外，您可以使用 .appendTo()< 来减少总体代码和选择器工作/a> 相反，像这样：

$('#inputs_menu li ul').sortable({
  connectWith: "ul#layout_form",
}).disableSelection();
$('#inputs_menu li ul li').sortable({
  helper: "clone"
}).disableSelection();

$('#layout_form' ).sortable({
  receive: function(event, ui) {
    var new_item = ui.helper.id.substr(4);
    $('<li><div id="'+new_item+'"class="'+new_item+' inputs radius_10" ></div></li>')
      .appendTo('#layout_form')
      .find("div").load('includes/text.php?fld_name='+new_item);            
  }
}).disableSelection();

Instead of ui.item which is the original, you want ui.helper here, which is the clone. Also, you can cut down on overall code and selector work by using .appendTo() instead, like this:

$('#inputs_menu li ul').sortable({
  connectWith: "ul#layout_form",
}).disableSelection();
$('#inputs_menu li ul li').sortable({
  helper: "clone"
}).disableSelection();

$('#layout_form' ).sortable({
  receive: function(event, ui) {
    var new_item = ui.helper.id.substr(4);
    $('<li><div id="'+new_item+'"class="'+new_item+' inputs radius_10" ></div></li>')
      .appendTo('#layout_form')
      .find("div").load('includes/text.php?fld_name='+new_item);            
  }
}).disableSelection();

回复收藏 0 原文

~没有更多了~