首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >手风琴安全壳不正常工作

手风琴安全壳不正常工作
EN

Stack Overflow用户
提问于 2018-03-13 09:48:22
回答 1查看 34关注 0票数 0

我用手风琴建立了一个父母和孩子系统。这个结构如下所示

代码语言:javascript
运行
复制
parent1
  child1
  child2
  child3
parent2
  child4
  child5
  child6
parent3
  child7
  child8
  child9

我还添加了一个拖放功能。我的要求是我不希望一个孩子被拖出当前的父母。它只能在当前父级中被拖动和替换。例如,儿童1,2和3的位置可以与拖动互换,但儿童2不应进入parent2和parent3。另外,不应该允许parent2子对象在parent1和parent2中拖动

我做了一项研究,发现手风琴提供了一个属性包含:父,但是它不能正常工作。有人能帮我解决这个问题吗?

代码语言:javascript
运行
复制
<div id="available_fields_container" class="accordion list_container ui-sortable active" data-accordion="one">
  <dd class="accordion-navigation active" id="data_download_fields">
    <a href="#data_download_fields">
      <b>FootBall Fields</b>
      <span class="collapse-symbol"></span>
    </a>
    <span class="select-group" data-fields="#data_download_fields">Select all</span>
    <div id="data_download_fields" class="content active" data-group="FootBall Fields">

      <div class="field_items"  data-index="4" data-group="FootBall Fields">
        Andrew
        <span class="plus-icon action-icon">+</span>
        <i class="icon-cross2 action-icon"></i>
      </div>
      <div class="field_items"  data-index="5" data-group="FootBall Fields">
        Sam
        <span class="plus-icon action-icon">+</span>
        <i class="icon-cross2 action-icon"></i>
      </div>

    </div>
  </dd>

    <dd class="accordion-navigation " id="data_download_hockey_fields">
      <a href="#data_download_hockey_fields">
        <b>hockey Fields</b>
        <span class="collapse-symbol"></span>
      </a>
      <span class="select-group" data-fields="#data_download_hockey_fields">Select all</span>
      <div id="data_download_hockey_fields" class="content " data-group="hockey Fields">
          <div class="field_items"  data-index="0" data-group="hockey Fields">
  jason
    <span class="plus-icon action-icon">+</span>
    <i class="icon-cross2 action-icon"></i>
  </div>
  <div class="field_items"  data-index="1" data-group="hockey Fields">
  Jane
    <span class="plus-icon action-icon">+</span>
    <i class="icon-cross2 action-icon"></i>
  </div>

      </div>
    </dd>

</div>
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-03-20 16:29:34

为了实现这些类型的事情,您可以使用jquery可排序回调。在您的情况下,您需要startout回调

代码语言:javascript
运行
复制
var before_drag;

start: function(event, ui){
  before_drag = ui.item.parent().attr('id')
}

out: function(event, ui){
  var after_drag = ui.item.parent().attr('id')
        if(before_drag != after_drag){
          event.preventDefault();
          event.stopPropagation();
        }
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49252928

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档