首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在拖动时动态排除可排序项?

在拖动时动态排除可排序项可以通过以下步骤实现:

  1. 确定可排序项:首先,确定哪些元素是可排序的。这些元素可以是列表、表格或其他可拖动的对象。
  2. 监听拖动事件:为可排序项添加拖动事件监听器,以便在拖动开始时触发相应的操作。
  3. 确定排除项:在拖动开始时,确定当前拖动项的位置,并确定需要排除的项。排除项可以是与当前拖动项相同类型的其他元素,或者根据特定条件进行筛选。
  4. 动态排除项:根据确定的排除项,将其从可排序项列表中移除或禁用。这可以通过修改元素的样式或属性来实现。
  5. 更新排序位置:在拖动过程中,根据拖动的位置更新排序项的位置。可以使用拖动事件提供的坐标信息来计算排序项的新位置。
  6. 完成拖动操作:当拖动结束时,将拖动项放置在最终位置,并恢复排除项的状态。这可以通过还原元素的样式或属性来实现。

以下是一个示例的实现方式:

代码语言:javascript
复制
// HTML结构
<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

// JavaScript代码
var sortable = document.getElementById('sortable');
var draggableItem = null;
var excludeItems = [];

// 监听拖动事件
sortable.addEventListener('dragstart', function(e) {
  draggableItem = e.target;
  excludeItems = determineExcludeItems(draggableItem); // 确定排除项
  updateSortable(); // 动态排除项
});

// 更新排序位置
sortable.addEventListener('dragover', function(e) {
  e.preventDefault();
  var targetItem = e.target;
  if (targetItem !== draggableItem && !excludeItems.includes(targetItem)) {
    var rect = targetItem.getBoundingClientRect();
    var isAfter = (e.clientY - rect.top) > (rect.height / 2);
    sortable.insertBefore(draggableItem, isAfter ? targetItem.nextSibling : targetItem);
  }
});

// 完成拖动操作
sortable.addEventListener('dragend', function() {
  draggableItem = null;
  excludeItems = [];
  updateSortable(); // 恢复排除项状态
});

// 确定排除项
function determineExcludeItems(draggableItem) {
  // 根据需要的逻辑确定排除项
  // 例如,排除与当前拖动项相同类型的其他元素
  var excludeItems = [];
  var items = sortable.children;
  for (var i = 0; i < items.length; i++) {
    if (items[i] !== draggableItem && items[i].tagName === draggableItem.tagName) {
      excludeItems.push(items[i]);
    }
  }
  return excludeItems;
}

// 动态排除项
function updateSortable() {
  var items = sortable.children;
  for (var i = 0; i < items.length; i++) {
    if (excludeItems.includes(items[i])) {
      items[i].classList.add('exclude');
    } else {
      items[i].classList.remove('exclude');
    }
  }
}

在上述示例中,我们通过监听拖动事件来确定排除项,并使用CSS类名来动态排除这些项。在拖动过程中,根据拖动的位置更新排序项的位置。拖动结束后,恢复排除项的状态。

这是一个基本的实现示例,具体的实现方式可能会根据具体的需求和技术栈而有所不同。在实际开发中,你可以根据自己的需求进行适当的修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 【Android 事件分发】ItemTouchHelper 实现拖动排序

    【Android 事件分发】事件分发源码分析 ( 驱动层通过中断传递事件 | WindowManagerService 向 View 层传递事件 ) 【Android 事件分发】事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -> PhoneWindow -> DecorView -> ViewGroup ) 【Android 事件分发】事件分发源码分析 ( ViewGroup 事件传递机制 一 ) 【Android 事件分发】事件分发源码分析 ( ViewGroup 事件传递机制 二 ) 【Android 事件分发】事件分发源码分析 ( ViewGroup 事件传递机制 三 ) 【Android 事件分发】事件分发源码分析 ( ViewGroup 事件传递机制 四 | View 事件传递机制 ) 【Android 事件分发】事件分发源码分析 ( ViewGroup 事件传递机制 五 ) 【Android 事件分发】事件分发源码分析 ( ViewGroup 事件传递机制 六 ) 【Android 事件分发】事件分发源码分析 ( ViewGroup 事件传递机制 七 )

    01

    Vcl控件详解_c++控件

    大家好,又见面了,我是你们的朋友全栈君。 TTabControl 属性  DisplayRect:只定该控件客户区的一个矩形 HotTrack:设置当鼠标经过页标签时,它的字是否有变化。如果为True,是字会变成蓝色 Images:为每个页标签添加一个图片 MultiLine:如果总页标签的长度大于该控件的宽度时,是否允许多行显示 MultiSelect:是否允许多选页标签。该属性只有当Style为tsFlatButtons或tsButtons时才有效 OwnerDraw:是否允许自己绘画该控件 RaggedRight:指定是否允许标签页伸展到控制宽度 ScrollOpposite:该属性设置将会使MultiLine设为True。当标签页的行数大于1时,当单击其它页时,在它下面的页会自动翻动该控件的底部 Style:设置该控件的样式,大家一试就会知道 TabHeight:设置页标签的高度 TabIndex:反映当前标签页的索引号。该号从0开始 TabPosition:选择页标签的位置,分上,下,左,右 Tabs:对每个页进行增,删,改 TabWidth:设置页标签的宽度

    01

    编写高性能SQL

    前言:系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据,劣质SQL语句和优质SQL语句之间的速度差别可达到上百倍,可见对于一个系统不是简单的能实现其功能就可以了,而是要写出高质量的SQL语句,提高系统的可用性。  在应用系统开发初期,由于开发数据库数据比较少,对于查询SQL语句,复杂视图的编写,刚开始不会体会出SQL语句各种写法的性能优劣,但是如果将应用系统提交实际应用后,随着数据库中数据的增加,系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据,劣质SQL语句和优质SQL语句之间的速度差别可达到上百倍,可见对于一个系统不是简单的能实现其功能就可以了,而是要写出高质量的SQL语句,提高系统的可用性。    在多数情况下,Oracle使用索引来更快的遍历表,优化器主要根据定义的索引来提高性能。但是,如果在SQL语句的where子句中写的SQL代码不合理,就会造成优化器删去索引而使用全表扫描,一般就这种SQL语句,被称为劣质的SQL语句。在编写SQL语句时我们应清楚优化器根据何种原则来删除索引,这有助于写出高性能之SQL语句。    下面就某些SQL语句的where子句编写中需要注意的问题作详细介绍。在这些where子句中,即使某些列存在索引,但是由于编写了劣质的SQL,系统在运行该SQL语句时也不能使用该索引,而同样使用全表扫描,这就造成了响应速度之极大降低。  1. IS NULL 与 IS NOT NULL    不能用null作索引,任何包含null值的列都将不会被包含在索引中。即使索引有多列这样之情况下,只要这些列中有一列含有null,该列就会从索引中排除。也就是说如果某列存在空值,即使对该列建索引也不会提高性能。    任何在where子句中使用is null或is not null的语句优化器是不允许使用索引的。 http://hovertree.com/menu/oracle/ 2. 联接列    对于有联接的列,即使最后的联接值为一个静态值,优化器是不会使用索引的。我们一起来看一个例子,假定有一个职工表(employee),对于一个职工之姓和名分成两列存放(FIRST_NAME和LAST_NAME),现在要查询一个叫比尔.克林顿(Bill Cliton)的职工。    下面是一个采用联接查询的SQL语句, 上面这条语句完全可以查询出是否有Bill Cliton这个员工,但是这里需要注意,系统优化器对基于last_name创建的索引没有使用。   当采用下面这种SQL语句来编写,Oracle系统就可以采用基于last_name创建的索引。    遇到下面这种情况又如何处理呢?如果一个变量(name)中存放着Bill Cliton这个员工之姓名,对于这种情况我们又如何避免全程遍历,使用索引呢?可以使用一个函数,将变量name中的姓和名分开就可以了,但是有一点需要注意,这个函数是不能作用在索引列上。下面是SQL查询脚本:  3. 带通配符(%)的like语句    同样以上面的例子来看这种情况。目前的需求是这样的,要求在职工表中查询名字中包含cliton的人。可以采用如下的查询SQL语句:    这里由于通配符(%)在搜寻词首出现,所以Oracle系统不使用last_name的索引。在很多情况下可能无法避免这种情况,但是一定要心中有底,通配符如此使用会降低查询速度。然而当通配符出现在字符串其他位置时,优化器就能利用索引。  4. Order by语句 ORDER BY语句决定了Oracle如何将返回的查询结果排序。Order by语句对要排序的列没有什么特别的限制,也可以将函数加入列中(象联接或者附加等)。任何在Order by语句的非索引项或者有计算表达式都将降低查询速度。    仔细检查order by语句以找出非索引项或者表达式,它们会降低性能。解决这个问题的办法就是重写order by语句以使用索引,也可以为所使用的列建立另外一个索引,同时应绝对避免在order by子句中使用表达式。  5. NOT    我们在查询时经常在where子句使用一些逻辑表达式,如大于、小于、等于以及不等于等等,也可以使用and(与)、or(或)以及not(非)。NOT可用来对任何逻辑运算符号取反。    如果要使用NOT,则应在取反的短语前面加上括号,并在短语前面加上NOT运算符。NOT运算符包含在另外一个逻辑运算符中,这就是不等于(<>)运算符。换句话说,即使不在查询where子句中显式的加入NOT词,NOT仍在运算符中。    对这个查询,可以改写为不使用NOT:    虽然这两种查询之结果一样,但是第二种查询方案会比第一种查询方案更快些。第二种查询允许Oracle对salary列使用索引,而第一种查询则不能使用索引。  6.

    02
    领券