移出或删除元素后，jQuery可排序拖动到事件上的占位符消失

当使用jQuery进行排序和拖动操作时，移出或删除元素后，原本占位符会消失。这是因为jQuery在处理排序和拖动时，会根据元素的位置进行动态调整。当元素被移除或删除后，原本的占位符也会随之消失。

jQuery是一个流行的JavaScript库，用于简化前端开发中的DOM操作和事件处理。它提供了丰富的功能和插件，可以方便地处理元素的排序和拖动。在排序和拖动过程中，jQuery会根据鼠标位置和元素之间的关系，实时调整元素的位置和显示效果。

当我们移出或删除一个元素时，jQuery会重新计算剩下元素的位置，并重新设置占位符。占位符是一个临时的空白区域，用于标识元素的目标位置。在排序和拖动过程中，占位符的存在可以提供视觉反馈，帮助用户更好地理解和掌握操作。

然而，当元素被移除或删除后，原本的占位符也会消失。这是因为占位符是基于元素的存在和位置计算的。一旦元素不存在，相关的占位符也就没有意义了，因此会被移除或消失。

总结起来，移出或删除元素后，jQuery可排序拖动到事件上的占位符消失是正常的行为。这不影响排序和拖动的功能，只是临时的显示效果变化。如果需要重新排序和拖动元素，可以通过jQuery的相关方法或插件进行操作。

相关·内容

jQuery ui中sortable draggable droppable的使用

最近工作中用到了jQuery UI中排序和拖拽功能，花了大概一天的时间，搞清楚了大概的参数配置，以及遇到的一些问题，总结如下。..."ui-state-highlight", // 排序过程中占位符的class样式设置 forcePlaceholderSize: true, // 强迫占位符有一个尺寸大小。...").sortable('toArray'); console.log(newSubArr); }, }).disableSelection(); // 拖动时禁止选中元素还有一些排序时候的事件和方法...return helper; }, handle: ".drag-at", // 指定在特定的元素上触发鼠标按下事件时，才可以拖动。...否则第一次初始化后，比如某个地方A可以放置拖拽的元素，但是第二次初始化后，地方A就不可以放置了。然而实际上，如果你不把第一次初始化的dropInit函数销毁掉，地方A在第二次初始化后还是可以放置的。

2.2K1 0

加点JavaScript魔法

初始化调用接受许多配置弹出窗口的选项，包括传递想要在弹出窗口中显示的内容，以及使用什么方法触发弹出窗口出现或消失（单击，悬停在元素上等），如果内容是纯文本或HTML，那么在文档中可以找到更多的选项。...使用“悬停”模式时，只要你将鼠标指针放在目标元素中，弹出窗口就会保持可见状态。当你移开鼠标时，弹出窗口将消失。这具有糟糕的副作用，即如果用户想要将鼠标指针移动到弹出窗口中，弹出窗口将消失。...正如我上面提到的，这会影响悬停事件的行为，只要用户将鼠标从链接移动到弹出窗口本身，就会触发“鼠标移出”事件。...如果在元素集合上调用这个函数，jQuery方便地将事件附加到所有元素上。这两个参数是两个函数，分别在用户将鼠标指针移入和移出目标元素时调用对应的函数。...现在剩下的就是完善鼠标移出事件处理程序上的删除弹出窗口逻辑。如果用户将鼠标移出目标元素，该处理程序已经具有中止弹出操作的逻辑。

3.9K1 0

jquery对象和dom对象的相互转换

，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。...=['#f00','#0f0','#00f'][i]}) //为三个不同的p元素单击事件分别设定不同的处理 jQuery中几个自定义的事件：（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面...当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。 //当鼠标放在表格的某行上时将class置为over，离开时置为out。...从每一个匹配的元素中（添加）删除绑定的事件。...p元素上的所有事件 $("p").unbind("click") //删除所有p元素上的单击事件 10、几个实用特效功能其中toggle()和slidetoggle()方法提供了状态切换功能。

3.3K4 0

Jquery 使用技巧总结

//如果存在（不存在）就删除（添加）名称为select的class 9、完善的事件处理功能 Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery...=['#f00','#0f0','#00f']}) //为三个不同的p元素单击事件分别设定不同的处理 jQuery中几个自定义的事件：（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象...当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。 //当鼠标放在表格的某行上时将class置为over，离开时置为out。...: 事件的绑定与反绑定从每一个匹配的元素中（添加）删除绑定的事件。...//删除所有p元素上的所有事件 $("p").unbind("click") //删除所有p元素上的单击事件 10、几个实用特效功能其中toggle()和slidetoggle

2.9K2 0

JQuery基础

常见DOM事件：鼠标事件：click（单击元素）,dbclick（双击元素）,mouseenter(鼠标指针移入元素),mouseleave（鼠标指针移出元素）事件；键盘事件：keypress（键被按下...当鼠标指针移动到元素上时，会触发第一个函数（mouseenter）；当鼠标指针移出这个元素时，会触发第二个函数（mouseleave）。...规定隐藏或显示的速度，取值可以为"slow","fast"或毫秒；可选的callback是隐藏或显示后执行的函数名称。　　...3.jQuery 删除元素： remove()：删除被选元素及子元素。ps：remove()可接受一个参数，对被删元素进行过滤。参数是jQuery选择器的语法。...例如:$('p').remove('.test1'); empty()：从被选元素中删除子元素（被选元素没有被删除，相当于留了一个外壳） 4.获取/设置css类: addClass()：向被选元素中添加一个或多个类

4.7K5 1

【前端基础篇】JavaScript之jQuery介绍

,点击后元素消失....⼀旦⽤⼾有反应(触发具体动作),哨兵就会点燃烽⽕台的狼烟(事件),后⽅就可以根据狼烟来决定下⼀步的对敌策略. 事件由三部分组成：事件源:哪个元素触发的事件类型:是点击,选中,还是修改?...例如:某个元素的点击事件: $("p").click(function(){ //动作发⽣后执⾏的代码 }); 常⻅的事件有: 事件代码文档就绪事件(完成加载) $(document).ready...⼊"); }); 删除元素删除元素和内容，⼀般使⽤以下两个jQuery⽅法： remove():删除被选元素（及其⼦元素） empty():删除被选元素的⼦元素。...，背景颜色变为浅蓝色；移出时，变为浅灰色 keydown(): 当用户按下键盘按键时触发，适合处理键盘事件。

981 0

jQuery Cheat—Sheet（jQuery学习笔记）

函数接受CSS选择符作为参数，充当一个工厂，返回包含页面中对应元素的jQuery对象。...jQuery对象选择符有三种：标签名、ID、类可以单独使用，也可以与其他选择符组合使用元素选择器 jQuery 元素选择器基于元素名选取元素。...混合选择 eg： $('#selected-plays > li') 子元素选择符 > 查找ID为selected-plays元素的子元素（>）中所有的列表项 ---- jQuery 事件什么是事件...; }); 鼠标移入并点击事件当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。在下面实例中，鼠标移入元素，并点击时，弹出“Bye!...当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter，); 当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

16.2K3 0

jQuery：详解jQuery中的事件（二）

上一篇讲到jQuery中的事件，深入学习了加载DOM和事件绑定的相关知识，这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。　　...当鼠标移动到元素上时，会触发指定的第一个函数（enter）；当鼠标移出这个元素时，会触发指定的第二个函数（leave）。　　...所以，移除事件就涉及两种情况下的移出，一种是移除之前注册的所有事件，而是移除其中的一个事件。以一个按钮为例：假设网页中有一个id为btn的按钮，其上绑定了几个click事件。...显然移除元素上的所有事件是使用没有第二个参数的unbind()方法。　　如果没有第一个参数，则移除所有绑定的事件；否则只删除该类型的事件。　　...如果传入了第二个参数，则只有这个特定的事件处理函数会被删除。这正是移除元素的某一个事件的方法。

2.2K3 0

React 拖拽排序组件 Draggable Sortable

二、基础知识（一）拖拽排序的概念拖拽排序允许用户通过鼠标或触摸手势将列表项从一个位置移动到另一个位置，从而改变它们的顺序。...例如，对于react-sortable-hoc： npm install react-sortable-hoc 创建可排序组件使用库提供的高阶组件（HOC）包裹原始组件，使其具备拖拽排序的能力。...例如，使用sortable-helper类来定义拖拽项的样式。占位符显示不当占位符用于指示拖拽项的目标位置，如果显示不当会影响用户体验。...解决方案：确保占位符的高度和宽度与原列表项一致，并且在合适的时间点显示或隐藏占位符。...状态更新延迟如果状态更新没有及时反映在UI上，可能是由于异步操作或批量更新导致的。解决方案：确保状态更新是在正确的时机触发的，可以使用useEffect钩子监听状态变化，及时更新DOM。

830 0

第79天：jQuery事件总结（二）

上一篇讲到jQuery中的事件，深入学习了加载DOM和事件绑定的相关知识，这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。　　...当鼠标移动到元素上时，会触发指定的第一个函数（enter）；当鼠标移出这个元素时，会触发指定的第二个函数（leave）。　　...解析如下：　　mouseover与mouseenter 　　不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。　　...三、移除事件：在绑定事件的过程中，不仅可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。　　所以，移除事件就涉及两种情况下的移出，一种是移除之前注册的所有事件，二是移除其中的一个事件。...显然移除元素上的所有事件是使用没有第二个参数的unbind()方法。　　如果没有第一个参数，则移除所有绑定的事件；否则只删除该类型的事件。

1.6K2 0

jQuery（事件和动画-基础事件、复合事件）

键盘弹起 keydown 对应onkeydown 键盘按下触发 keypress 对应onkeypress 鼠标产生可打印的字符时触发 $(window).resize() 窗口大小调整时触发的事件...参数speed：定义显示的速度。参数各属性： slow慢慢的显示； normal正常的显示； fast快速的显示；参数function：回调函数，当目标元素全部显示完成后触发。...事件切换 hover hover(over,out); 作用：一个模仿悬停事件（鼠标移动到一个对象上方及移出这个对象）的方法。...这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。...而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

1.4K1 0

前端(四)-jQuery

对象，就可以对这个对象进行操作；可以查找当前元素下的子元素； html //当鼠标访问指定的li时，指定的li下的p标签显示，鼠标移除后，对应的p消失 3</span...方法说明 remove() 删除当前整个节点 empty() 清空节点内容，节点还存在 detach() 删除整个节点，保留元素的绑定事件和附加的数据 3.4.4 替换节点方法说明 $(A)replaceWith...(B) B节点替换A节点 $(A).replaceAll(B) A节点替换B节点 3.4.5 复制节点方法说明 clone(true) 复制节点及节点上的事件 clone(false) 复制节点但不复制节点上的事件...() 鼠标移出事件 hover() 鼠标移入和移出事件 click() 鼠标点击事件 dblclick() 鼠标双击事件 focus() 获取焦点事件 blur() 失去焦点事件鼠标事件方法的区别...4.1.2 键盘事件方法说明 keydown() 键盘按下事件 keyup() 键盘弹起事件 keypress 产生可打印的字符事件键盘按下灵活应用 //键盘按下事件，判断是否是enter

8.6K3 0

waypoint_使用jQuery Waypoint创建粘性导航标题

它的唯一目的是在用户滚动到某个元素时触发事件。如您所见，它非常简单，但提供了很大的灵活性-您可以在其主页上查看几个示例。在页面中包含jQuery和Waypoint，让我们开始吧！...首先，我们需要将导航栏封闭在一个容器中，这将是我们的实际航路点，并用作方便的占位符（在下面进行更多介绍）。...在处理程序函数的主体中，我们使用的是jQuery的.toggleClass()方法的.toggleClass()变体，该变体提供了一种有用的速记方式：在此语法中，第二个参数确定是否将类添加到目标元素或从中删除...：如上所述，我们使用nav-container作为占位符。...所有这些都是标准的jQuery票价：在nav添加或删除sticky类后，我们便会使用.css()覆盖元素的垂直位置，然后使用.animate()其设置为应有的水平。

3.4K3 0

Web前端基础（08）

###事件模拟模拟触发某个元素的某个事件格式: 元素对象.trigger(“事件名称”); $(“input”).trigger(“click”); ###鼠标移入移出事件合并 hover...将鼠标移入和移出两个事件合并到一起 //给元素添加鼠标移入移出合并事件 (“div”).hover(function(){ //鼠标移入时执行 (this).css(“color”,“red”); }...(时间,方法); 上滑元素对象.slideUp(时间,方法); 下滑元素对象.slideDown(时间,方法); 自定义元素对象.animate({“样式名”:“值”},时间); ---- 练习...div if(left<=-400){ //让当前图的位置移动到最后面 left=1200; } //再把减少后的left值赋值给元素 $..."> //给元素添加鼠标移入移出合并事件 $("div").hover(function(){ //鼠标移入时执行 $(this).css("color","red");

1.2K1 0

jQuery笔试题汇总整理--2018

1、因为jQuery是轻量级的框架，大小不到30kb 2、它有强大的选择器，出色的DOM操作的封装 3、有可靠的事件处理机制(jQuery在处理事件绑定的时候相当的可靠) 4、完善的ajax(它的ajax...不安全 7、怎么使用jQuery中的动画影藏：hide() 显示：show() 淡入淡出：fadeIn()==淡入(显示) fadeOut()==淡出(消失) 滑动：slideUp()=...()方法来删除元素属性 10、如何来设置和获取HTML和文本的值？...expr)搜索所有与指定表达式匹配的元素. 7)bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数. 8)empty()删除匹配的元素集合中所有的子节点. ...9)hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法. 10)attr(name)取得第一个匹配元素的属性值. 11)addClass(class

2.5K2 1

【前端基础】javascript笔记

JS或其他语言可以操作这个模型的元素（属性） 2.1 window对象 window对象是DOM树结构的根。...HTML #获取DOM内容 text() 设置或返回元素文本内容 html() 设置或返回元素的HTML内容 val() 设置或返回表单字段的值 attr() 获取属性....append("hi"); }) }); #删除元素 remove() 删除元素及其子元素 empty() 从被选元素中删除子元素#css方法...css() $("p").css("backgroud-color":"yellow");四 jQuery 遍历遍历就是根源其相对于其他元素的关系来获取HTML元素 # jQuery...祖先 parent() 返回元素的直接父元素 parents() 返回所有父元素 parentsUntil("div") 返回直到div的父元素 # jQuery

1571 0

js面试题

扩展运算符用三个点表示，把数组或对象展开成一系列用逗号隔开的值rest运算符也是三个点号，不过其功能与扩展运算符恰好相反，把逗号隔开的值序列组合成一个数组解决异步的方式有哪些？...--concat( ) 连接数组--join( ) 将数组元素按指定分隔符连接起来，返回一个字符串--pop( ) 删除并返回数组的最后一个元素 (出栈) 常用--push( ) 给数组添加元素 (入栈...( ) 对数组元素进行排序常用--splice( ) 插入、删除或替换数组的元素常用--toString( ) 将数组转换成一个字符串数组对象，变异和非变异方法？...Object.entries()返回给定对象自身可枚举属性的[key, value]数组。Object.freeze()冻结对象：其他代码不能删除或更改任何属性。...内存泄漏指因为疏忽或错误造成程序未能释放已经不在使用的内存的情况。内存泄漏并不是指内存在物理上的消失，而是应用程序分配某段内存后，因为设计错误，失去了对该段内存的控制，而造成内存的浪费。

6263 0

JavaScript 学习-35.jQuery 基础语法与事件

JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。...jQuery 基本语法通过jQuery 可以对元素查询修改操作，也可以添加事件。...基本语法结构美元符号定义 jQuery 选择符（selector）”查询”和”查找” HTML 元素 jQuery 的 action() 执行对元素的操作 $(selector).action()...隐藏和显示 jQuery 提供了隐藏和显示元素的基本方法 hide() 隐藏元素 show() 显示元素 toggle() 切换显示和隐藏示例如果你点击“隐藏” 按钮，我将会消失...() 当鼠标指针移动到元素上方，并按下鼠标按键 mouseup() 松开鼠标按钮 hover() 光标悬停事件 focus() 获得焦点时，发生 focus 事件 blur() 失去焦点时，发生 blur

2K1 0

前端架构师之01_JQuery

从DOM中删除所有匹配的元素（保留所有绑定的事件、附加的数据等） empty()方法仅能删除匹配元素的文本内容，而元素节点依然存在。...鼠标事件 dblclick([[data],function]) 当双击元素时触发鼠标事件 mousedown([[data], function]) 当鼠标指针移动到元素上方，并按下鼠标按键时触发...语法说明 on(events,[selector],[data],function) 在匹配元素上绑定一个或多个事件处理函数 off(events,[selector],[function]) 在匹配元素上移除一个或多个事件处理函数...').on('mouseover mouseout', function() { console.log('鼠标移入或移出'); }); // 多个事件绑定不同的函数 $('div').on({...7.3 jQuery UI jQuery UI是在jQuery基础上新增的一个库。特点：拥有强大的可扩展功能，具有吸引人的漂亮页面，能够更轻松地在网页中添加专业级的UI元素。

680 0

(长文预警) 你还在烦工作中碰到的拖拽问题？一个框架jiejue

Sortablejs 简介 Sortable —是一个JavaScript库，用于在现代浏览器和触摸设备上对拖放列表进行重新排序。无需jQuery。..."baz", "qux"]|function 是可以从其他列表中添加元素，还是可以从中添加元素的组名数组 revertClone：boolean—在移动到另一个列表后，将克隆的元素恢复到初始位置 dragUlKey...delay设置此选项后，即使手指不动，某些具有非常灵敏的触摸显示屏的手机（如三星Galaxy S8）也会触发不需要的触摸移动事件，从而导致排序不会触发。...默认情况下，此选项为true，这意味着Sortable在应该被隐藏时将从DOM中删除克隆的元素 emptyInsertThreshold 选项拖动时鼠标必须与一个空的可排序对象之间的距离（以像素为单位...交换插件该插件修改了Sortable的行为，以允许项目彼此交换而不是进行排序。一旦开始拖动，用户就可以将其拖动到其他项目上，并且元素不会发生任何变化。但是，用户放置的项目将与原始拖动的项目交换 ?

7.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云