Question

我有可拖动的li被拖动到多个div，视口外的div不被可拖动的东西识别。示例代码是

$("li[elName=fieldEl]").draggable(
{
    connectToSortable       :   $("#fieldsList,#subformdiv")
    containment             :   $('#build-main'),   
    appendTo                :   $("#formBuilderSlide"), 
    helper                  :   "clone",
    zIndex                  :   104,
    start : function(){},
    drag  : function(){},
    revert : function{}
});

#fieldslist div正在被识别，但#subformdiv出现在视口之外。当滚动到该部分以拖放＆＃39; li＆＃39;时，拖动器无法识别它。

Subform div在fieldslist div中，这两个div在build-main中。

如何克服这个问题？

Answer 1

你的问题不是很清楚。但是根据我的理解，问题是拖拽不能在#fieldset div之外识别。

可能的原因是#subformdiv超出#build-main div。在给定的代码中，您已将拖动范围设置为#build-main div，并且无法识别其外的任何div。

尝试将#subformdiv放入#build-main div。

我创造了一个我想象中的样本。得到一个想法可能会有用。

#out是一个外部div（蓝色）到#build-main div，而draggable在该div中不起作用。但是所有其他div都在#build-main范围内，而draggable正在为他们工作。

＆＃13;

$(function() {
          $("li[elName=fieldEl]").draggable({
            connectToSortable: $("#fieldsList,#subformdiv"),
            containment: $('#build-main'),
            appendTo: $("#formBuilderSlide"),
            helper: "clone",
            zIndex: 104,
            start: function() {},
            drag: function() {},
            revert: function() {}

          });
        });

＆＃13;

#fieldslist {
  height: 150px;
  padding: 0.5em;
  background: #eee;
}
#subformdiv {
  height: 150px;
  padding: 0.5em;
  background: yellow;
}
#formBuilderSlide {
  height: 150px;
  padding: 0.5em;
  background: green;
}
#build-main {
  padding: 0.5em;
}
#out {
  height: 150px;
  padding: 0.5em;
  background: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id="out">

</div>
<div id="build-main">
  <div id="fieldslist" class="ui-widget-content">
    <ul>
      <li elName="fieldEl">
        A
      </li>
      <li elName="fieldEl">
        B
      </li>
      <li elName="fieldEl">
        C
      </li>
    </ul>
  </div>

  <div id="subformdiv">

  </div>
  <div id="formBuilderSlide">

  </div>
</div>

＆＃13;

jquery draggable没有出现在视口外的div

1 个答案: