JavaScript
谁帮看看这是为什么第二个不可以拖拽了
墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网
我也要 关注 + 加入社区新增第二个可拖拽的模块 第一个就不可以缩放了 不知道为什么
我去不能传附件
我去不能传附件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> DO </title>
<meta name="Generator" content="EditPlus">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 引用css -->
<style type="text/css">
#top{
display: block;
width: 100%;
height: 100px;
line-height: 100px;
}
#top li{
width: 80px;
height: 25px;
line-height: 25px;
list-style: none;
float: left;
border: 1px solid black;
text-align: center;
}
.box{display:block;width:600px;}
#left,#right{width:600px;float: left;}
#rightMenu{
width: 100%;
height: 50px;
}
#rightMenu p{
width: 60px;
height: 25px;
line-height: 25px;
float:left;
margin-left:5px;
}
#rightMenu input{
width: 40px;
height: 25px;
line-height: 25px;
}
.box p{
width: 200px;
height:200px;
display: block
}
.close{
position: absolute;
right: 5px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<!-- 引用js -->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/drag.js"></script>
<script src="http://www.jq22.com/jquery/jquery-ui-1.11.0.js"></script>
<script>
var currentId = "";
function init(){
$('.box-5 div').each(function() {
$(this).dragging({
move: 'both',
randomPosition: true,
hander: '.hander'
});
});
$(".ui-widget-content").each(function() {
$(this).resizable({
aspectRatio: true//开启按比例缩放，也可以指定比例： 16 / 9
});
$(this).bind("click",function(){
currentId = $(this).attr("id");
})
});
}
$(function() {
var picIndex = 0;
var videoIndex = 0;
var marqueeIndex = 0;
$(".addPic").click(function(){
var id = picIndex +1;
picIndex = id;
var content = "图片"+id;
var divId = 'pic'+id;
var html = '<div id="'+divId+'" class="ui-widget-content"><i class="hander"></i><p>'+content+'</p></div>'
$(".box").html($(".box").html()+html);
//init();
$("#"+divId).width(200);
$("#"+divId).height(200);
$(".box-5 #"+divId).dragging({
move: 'both',
randomPosition: true,
hander: '.hander'
});
$("#"+divId).resizable({
aspectRatio: true//开启按比例缩放，也可以指定比例： 16 / 9
});
$("#"+divId).bind("click",function(){
currentId = $(this).attr("id");
})
})
$(".addVideo").click(function(){
var id = videoIndex +1;
videoIndex = id;
var content = "视频"+id;
var divId = 'video'+id;
var html = '<div id="'+divId+'" class="ui-widget-content"><i class="hander"></i><p>'+content+'</p></div>'
$(".box").html($(".box").html()+html);
//init();
$("#"+divId).width(200);
$("#"+divId).height(200);
$(".box-5 #"+divId).dragging({
move: 'both',
randomPosition: true,
hander: '.hander'
});
$("#"+divId).resizable({
aspectRatio: true//开启按比例缩放，也可以指定比例： 16 / 9
});
$("#"+divId).bind("click",function(){
currentId = $(this).attr("id");
})
})
$(".addMarquee").click(function(){
var id = marqueeIndex +1;
marqueeIndex = id;
var content = "跑马灯"+id;
var divId = 'marque'+id;
var html = '<div id="'+divId+'" class="ui-widget-content"><i class="hander"></i><p>'+content+'</p></div>'
$(".box").html($(".box").html()+html);
//init();
$("#"+divId).width(200);
$("#"+divId).height(200);
$(".box-5 #"+divId).dragging({
move: 'both',
randomPosition: true,
hander: '.hander'
});
$("#"+divId).resizable({
aspectRatio: true//开启按比例缩放，也可以指定比例： 16 / 9
});
$("#"+divId).bind("click",function(){
currentId = $(this).attr("id");
})
})
//改变盒子高度
$(".input1").keyup(function(){
var screenHeight = $(this).val();
$(".box").css("height",screenHeight+"px");
});
//改变盒子高度
$(".input2").keyup(function(){
var screenWidth = $(this).val();
$(".box").css("width",screenWidth+"px");
});
//改变小模块左边距
$(".input3").keyup(function(){
$("#"+currentId).css("left",$(".input3").val()+"px");
});
//改变小模块上边距
$(".input4").keyup(function(){
$("#"+currentId).css("top",$(".input4").val()+"px");
});
//改变小模块宽度
$(".input5").keyup(function(){
$("#"+currentId).width($(".input5").val());
});
////改变小模块高度
$(".input6").keyup(function(){
$("#"+currentId).height($(".input6").val());
});
});
</script>
</head>
<body>
<div id="top"><ul style="width: 250px;margin: 0 auto;"><li class="addPic">图片</li><li class="addVideo">视频</li><li class="addMarquee">跑马灯</li></ul></div>
<div id="left">
<p>屏幕宽度：<input type="text" class="input1"></p>
<p>屏幕高度：<input type="text" class="input2"></p>
</div>
<div id="right">
<div id="rightMenu">
<p>左<input type="text" class="input3"></p>
<p>上<input type="text" class="input4"></p>
<p>宽<input type="text" class="input5"></p>
<p>高<input type="text" class="input6"></p>
</div>
<div class='box box-5'>
</div>
</div>
</body>
</html>
...全文
相关推荐
职场新人我为什么不愿意帮你Word范文
这是一套职场新人我为什么不愿意帮你Word范文，喜欢的人都来下载吧。该文档为职场新人我为什么不愿意帮你Word范文，是一份很不错的参考资料，具有较高参考价值，感兴趣的可以下载看看
WPF Drag DragDrop 拖拽 自定义拖拽 自定义拖拽图标 拖拽图标 拖拽图片
最开始的源码来自于CodeProject，感谢老外的代码， 但是老外的代码写的太多了，太“罗嗦”，不适合新手、或是初级开发的鸟儿们看、用，于是我没吃中饭，给代码动了手术，把猫腻都干掉了。 功能：Wpf的拖拽功能很好使，但是伴随拖拽的图标确实系统级别的，不能更改，就几个很傻的很小的东西，这个例子就是改这个图标的，比如，你拖拽一个文件夹，这时候跟着鼠标走的不是 一个虚线的小东西，而是一个文件夹，你托一个Button，那么跟着你走的就是一个Button... 跟Windows系统的拖拽一样。而且代码也被我改的很简单，只有一个类。 很好看懂，希望对大家有用。
vue实现拖拽的简单案例 不超出可视区域
本文实例为大家分享了vue实现拖拽x效果的具体代码，供大家参考，具体内容如下 实现拖拽之前，先了解几个小常识： 这两种获取鼠标坐标的方法，区别在于基于的对象不同： pageX和pageY获取的是鼠标指针距离文档（HTML）的左上角距离，不会随着滚动条滚动而改变； clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离，会随着滚动条滚动而改变； 1.clientX : 是用来获取鼠标点击的位置距离 当前窗口 左边的距离 2.clientY: 是用来获取鼠标点击的位置距离 当前窗口 上边的距离 3.offsetWidth: 用来获取当前拖拽元素 自身
vue 实现左右拖拽元素并且不超过他的父元素的宽度
主要介绍了vue 实现左右拖拽元素并且不超过他的父元素的宽度,需要的朋友可以参考下
可视化拖拽 UI 布局之拖拽篇
前言：前段时间负责公司的运营管理后台项目，通过运营后台的PC端拖拽配置布局，达到App首页模板的动态UI界面配置，生成页面。趁着周末，整理一下当时所了解到的拖拽。文章会根据大家的反馈或者自己学习经验的累积成长不定期更新丰富。如果你想了解更多PC端的拖拽开发，欢迎点赞关注或者收藏一波[鞠躬]。 之前在掘金一篇文章里看到这段话: UI 开发的三种模式 1.手写标签和样式代码，生成页面 2...
