页面导入了多个css、js,include了多个页面后,draggable is not a function

在一个jsp里导入了多个css样式,多个js,include了多个页面后,不知道为什么总是出现一些问题。

 

1.include的页面自己包含的css样式有时在ie下会无法加载,把css样式放到主页面上就能加载。

 

2.主页面上导入的css样式过多,ie下也会无法加载,合并几个css样式到一个css样式里后,又正常了。

 

3.导入的js文件中包含了jquery、jqueryui等等,使用jqueryui中的draggable方法时,出现莫名的错误" $(",后来发现 "$().draggable()is not a function". jqueryUI.js的导入无效。 将jquery.js和jQueryUi.js合并后,运行正常。

 

不知道为什么出错,不知道为什么正常。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要使用 react-draggable 实现多个标签的排序,可以通过以下步骤来实现: 1. 在父组件中定义一个数组,用于存放所有的标签,每个标签需要包含一个唯一的 id 属性和一个 text 属性。 2. 使用 map() 方法将数组中的每个标签渲染为一个子组件,并将 id 和 text 作为 props 传递给子组件。 3. 在子组件中使用 react-draggable 包装标签内容,使其成为可拖动的元素。 4. 在每个子组件的拖动结束时,获取当前标签的 id 和拖动结束后的位置信息,并更新父组件中保存的标签数组的顺序。 5. 在父组件中使用数组的顺序重新渲染所有标签,实现多个标签的排序效果。 以下是一个简单的示例代码: ```jsx import React, { useState } from "react"; import Draggable from "react-draggable"; function Tag({ id, text, onDragStop }) { const [position, setPosition] = useState({ x: 0, y: 0 }); const handleDrag = (e, { x, y }) => { setPosition({ x, y }); }; const handleDragStop = () => { onDragStop(id, position); }; return ( <Draggable position={position} onDrag={handleDrag} onStop={handleDragStop} > <div className="tag">{text}</div> </Draggable> ); } function TagList() { const [tags, setTags] = useState([ { id: 1, text: "Tag 1" }, { id: 2, text: "Tag 2" }, { id: 3, text: "Tag 3" }, { id: 4, text: "Tag 4" }, ]); const handleTagDragStop = (id, position) => { const newTags = [...tags]; const index = newTags.findIndex((tag) => tag.id === id); newTags[index].position = position; newTags.sort((a, b) => a.position.y - b.position.y); setTags(newTags); }; return ( <div className="tag-list"> {tags.map((tag) => ( <Tag key={tag.id} id={tag.id} text={tag.text} onDragStop={handleTagDragStop} /> ))} </div> ); } ``` 在上面的示例代码中,TagList 组件包含了一个 Tag 组件列表,每个 Tag 组件都通过 react-draggable 包装成了可拖动的元素。在每个 Tag 组件的拖动结束时,会调用 handleTagDragStop() 方法,该方法会更新标签数组的顺序并重新渲染所有标签。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值