<script> $(document).ready(function () { $(".sortable-list").sortable({ connectWith: ".connectList" }).disableSelection(); }); </script>
时间: 2024-02-14 14:22:25 浏览: 25
这是一个使用 jQuery UI 库实现的可排序列表的 JavaScript 代码段。它将类名为“sortable-list”的元素转换为可拖拽的排序列表,并将它们与类名为“connectList”的元素连接起来,以便它们可以在列表之间拖放。最后,使用 disableSelection() 禁止选择列表中的文本。
相关问题
<script src="js/content.js?v=1.0.0"></script> <script> $(document).ready(function () { $(".sortable-list").sortable({ connectWith: ".connectList" }).disableSelection(); }); </script>
这段代码使用了jQuery UI库中的sortable方法,实现了一个可拖拽排序的功能。具体来说:
1. `$(".sortable-list")`选中了class为`sortable-list`的DOM元素,这个DOM元素是一个可排序的列表。
2. `.sortable()`方法将这个列表变为一个可排序的列表,其中`connectWith: ".connectList"`表示此列表可以与class为`connectList`的列表互相拖拽。
3. `.disableSelection()`方法禁止了选中列表中的文本内容,避免了在拖拽时出现文本选中的情况。
最后,这个代码块应该放在HTML文档中,可以在`<head>`或`<body>`标签内加入。其中`<script>`标签用于引入`content.js`脚本文件,`<script>`标签内的代码则是jQuery UI库的使用示例。
<template> <el-table :data="tableData" style="width: 100%" stripe ref="multipleTable" @selection-change="handleSelectionChange" :header-cell-style="{background:'#eef1f6',color:'#606266'}"> <el-table-column prop="id" label="编号" sortable /> <el-table-column prop="img" label="图片url" sortable /> </el-table> </template> <script setup> import {ref,toRefs,reactive,onMounted,getCurrentInstance} from 'vue' let { proxy } = getCurrentInstance(); import router from '@/router' onMounted(()=>{ getTableData(); }); //获取表单信息 let tableData = ref([]); function getTableData() { proxy.$http.get('/ImgController/imgFind') .then(res => { tableData.value=res.data; console.log(res.data) }) .catch(err => { console.log(err) }); } </script> <style scoped> </style>以上代码如何显示图片
你可以在 `el-table-column` 的 `render` 属性中编写一个函数,将图片 URL 渲染为图片元素。例如:
```html
<el-table-column prop="img" label="图片url" sortable :render="renderImg" />
function renderImg(scope) {
return <img src={scope.row.img} style="max-width:100%;max-height:100%;" />;
}
```
这里使用了 Vue 3 中的 JSX 语法,需要在项目中安装 `@vue/babel-plugin-jsx` 和 `@vue/babel-preset-app`,并在 `.babelrc` 中配置:
```json
{
"presets": ["@vue/app"],
"plugins": [["@vue/babel-plugin-jsx", { "injectH": false }]]
}
```
当然,如果你不想使用 JSX,也可以在 `render` 属性中直接写一个函数式组件。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)