jQuery UI Sortable项目可在多个容器中访问

问题描述

我在jQuery UI中设置了一个可排序的演示，并希望以下功能和限制。

• 我设置了2个容器部分和列。
• 我有一个门户元素“外部”，可以在内部列和部分之间进行分类和移动，但是内部门户“内部”元素只能在内部列内部移动，而不能在内部框或部分外部移动。

我遇到一个问题，无法阻止“内部”元素拖到内部列容器之外。我必须分别初始化2个可排序容器，因为这两个容器的选项都不同，并且我需要设置两个容器都可以访问的“外部”元素。

我在下面添加了一个代码段，您也可以查看jsfiddle。

def join_dataframes(list_of_join_columns,left_df,right_df):
    return left_df.join(right_df,on=list_of_join_columns)

joined_df = functools.reduce(
    functools.partial(join_dataframes,list_of_join_columns),list_of_dataframes,)

$(function() {

  $(".section").sortable({
    connectWith: ".section,.inn_column",items: '.portlet',//handle: ".portlet-header",cancel: ".inn_portlet",placeholder: "portlet-placeholder ui-corner-all"
  });
  $(".inn_column").sortable({
    connectWith: ".inn_column,.section",//items: '.portlet,.inn_portlet',//cancel: ".portlet-toggle",placeholder: "portlet-placeholder ui-corner-all"
  });


});

body {
  min-width: 520px;
}

.section {
  width: 170px;
  float: left;
  padding-bottom: 100px;
  border: 1px solid;
  margin: 5px;
}

.inn_portlet,.portlet {
  margin: 0 1em 1em 0;
  padding: 0.3em;
}

.portlet-header {
  padding: 0.2em 0.3em;
  margin-bottom: 0.5em;
  position: relative;
  background: #f0f0f0f0;
}

.portlet-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -8px;
}

.portlet-content {
  padding: 0.4em;
}

.portlet-placeholder {
  border: 1px dotted black;
  margin: 0 1em 1em 0;
  height: 50px;
}

.inn_column {
  border: 1px solid;
  margin: 5px;
}

.inn_column .inn_portlet .portlet-header {
  background: #fff0f0f0;
}

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）