马大头 2017-07-05 02:31 采纳率: 0%
浏览 3973
已采纳

jqueryUI的draggable拖拽插件进行clone复制拖拽时候,经过其他区域样式发生改变

图片说明

图片说明

图片说明

图片说明

如以上图片,第一张图是将右边列表内容拖拽进中间区域时,样式显示正常
第二三四张图是将左边列表内容拖拽近中间区域时,经过中间区域便会被压缩,最终被挤压成一竖列,这是为什么?
左边列表和右边列表的数据获取方式,样式什么的都是完全相同的,为啥左右的效果不一样

  • 写回答

3条回答 默认 最新

  • 张大教主 2017-07-05 02:54
    关注
    应该是父区域的样式影响了它本身的样式，你可以对拖动元素的样式（宽、高）单独设置，这样自身样式优先级高于继承样式
如果不是这个原因，建议把代码贴出来，这样好排查
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

  • jQuery UI 实例 - 拖动（Draggable）
    2025-04-18 21:23
    宇哥资料的博客 允许使用鼠标移动元素。如需了解更多有关 draggable 交互的细节，请查看 API 文档。
  • jQuery UI-Draggable 参数集合
    2020-10-29 10:33
    最简单的用法只需要引入 jQuery UI 的核心文件 `ui/ui.core.js` 和拖拽插件 `ui/ui.draggable.js`，然后使用以下代码来启用拖拽功能： ```javascript $( "#draggable" ).draggable(); ``` 这将使得 ID 为 ...
  • 通过JQuery，JQueryUI和Jsplumb实现拖拽模块
    2020-10-16 19:36
    JQueryUI的拖放功能使得元素可以被拖动并放置到其他可接受的区域。同时，JQueryUI的样式可定制，可以轻松调整以适应不同的设计需求，对多种浏览器有良好的兼容性。 **Jsplumb** 是一个专门用于创建元素间连接的库，...
  • jquery ui draggable拖动 demo
    2016-11-25 16:33
    `draggable`是jQuery UI库中的一个关键组件，它允许用户通过鼠标拖动DOM元素，从而创建出各种动态效果，如拖放操作、窗口移动等。 首先，`draggable`的基本用法是将此功能应用到一个HTML元素上，通常是`div`或其他...
  • jquery draggable 复制
    2024-08-27 04:22
    稀里糊涂小飞猪的博客 使用 jQuery Draggable 实现元素复制功能 在现代 web 开发中，用户交互体验尤为重要。jQuery 是一个强大的 JavaScript 库，它在 DOM 操作、事件处理和动画等方面提供了便捷的接口。本文将为大家介绍怎样使用 jQuery ...
  • 解决jQuery UI draggable移动端不能拖拽问题
    2018-11-28 09:43
    lulu1993-04的博客 jquery.ui.touch-punch的引用 直接上代码 jquery.ui.touch-punch的下载链接:https://github.com/furf/jquery-ui-touch-punch 例html+css <!doctype html> <html lang="en"> ...
  • jQuery UI Draggable + Sortable 结合使用(实例讲解)
    2020-10-19 06:26
    首先，`jQuery UI Draggable`允许用户将元素拖动到页面的其他位置。在HTML代码中，我们需要为需要拖动的元素添加`draggable`类，并在JavaScript中配置相应的选项。在这个例子中，`.dragable`类的元素是可以被拖动的...
  • 如何使用jQuery Draggable和Droppable实现拖拽功能
    2020-10-27 03:35
    在实现拖拽功能之前，我们要确保页面已经引入了jQuery库以及jQuery UI库，因为jQuery UI库扩展了jQuery的Draggable和Droppable功能。 ### 一、实现左侧元素的可拖拽 在实现拖拽功能之前，我们首先需要确保页面上的...
  • jquery UI draggable 带复制拖拽
    2016-09-30 15:50
    weixin_30341745的博客 // 具体 就是修改 $('.ui-draggable-dragging').html（） 结构， 使得拖动过程中的样式美观， //('.this_a') 是要去拖目标对象的身份识别ID，('.this_b') 是对应得具体内容， 后面在去重判断时会用到。// 详细的 .....
  • jquery UI拖拽插件Draggable的使用
    2017-07-05 11:43
    马大头的博客 正文：Draggable(拖拽)   1、默认配置：就是简单的一行代码：$( "#目标元素Id" ).draggable(); title>jqeruy UI 拖拽练习--默认配置title> 导入jquery插件--> script type="text/javascript" src=...
  • 没有解决我的问题, 去提问