如何让DIV可编辑、可拖动



转载自:http://blog.csdn.net/jcx5083761/article/details/11764861


1、可编辑:

<div id="move" contentEditable="true">可编辑</div>

设置contentEditable属性可以让div编程可编辑状态

2、可拖动:

$('#move').draggable();

使用jQuery UI的draggable可以让div变成可拖动状态,但是如果两个属性同时应用就会出现可编辑功能失效的状况。

3、可编辑、可拖动:

<div id="move" contentEditable="true">可编辑</div>
var divTitle=$('#move');
divTitle.draggable().click(function ()
{
	$(this).draggable({ disabled: false });
	$(this).css('backgroundColor', 'transparent');
}).dblclick(function ()
{
	$(this).draggable({ disabled: true });
	$(this).css('backgroundColor', '#FFFF6F');
});
这样控制一下就可以让div同时具有edit和drag属性了。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用Ant Design Vue和Vue-Grid-Layout来实现一个可编辑的H5页面生成器。 Ant Design Vue是一套基于Vue.js的UI组件库,提供了丰富的组件和样式,可以帮助您快速搭建页面。 Vue-Grid-Layout是一个基于Vue.js的栅格布局组件,可以让您轻松地实现可拖拽和可调整大小的网格布局。 您可以使用Ant Design Vue来设计页面的组件和样式,然后使用Vue-Grid-Layout来实现可编辑的网格布局。用户可以通过拖拽和调整大小来修改页面布局,最终生成H5页面。 下面是一个简单的示例代码: ```vue <template> <div> <vue-grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true"> <div v-for="item in layout" :key="item.i" :data-grid="item"> <div :class="item.class"> {{item.i}} </div> </div> </vue-grid-layout> </div> </template> <script> import VueGridLayout from 'vue-grid-layout'; import { Button } from 'ant-design-vue'; export default { components: { VueGridLayout, Button, }, data() { return { layout: [ { i: 'a', x: 0, y: 0, w: 6, h: 4, class: 'box' }, { i: 'b', x: 6, y: 0, w: 6, h: 4, class: 'box' }, { i: 'c', x: 0, y: 4, w: 12, h: 4, class: 'box' }, ], }; }, }; </script> <style> .box { background-color: #eee; border: 1px solid #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; } </style> ``` 在这个示例中,我们使用了Ant Design Vue的Button组件来作为页面上的一个组件,并使用Vue-Grid-Layout来实现可编辑的网格布局。 您可以根据您的需求进行定制和扩展,实现一个符合您需求的可编辑的H5页面生成器。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值