A. web页面上实现图形的拖拽与组合 有什么好用点的框架或者方法嘛 ··好的书籍也行 (我是搞java开发的)
拖拽效果最好的达到效果是使用最新的html5. 建议去学习一下,极大方便了用户的操作。 html5是一个比较新的技术。它的提出极大丰富了web体验。
B. web系统中实现图形拖拽的功能,怎么做
document.onmousemove=function(e){
if(isDraging===true){
var nowX=e.pageX-startX;
var nowY=e.pageY-startY;
oDrag.style.left=nowX+'px';
oDrag.style.top=nowY+'px';
return false; //重新触发
}
}
addEventListener 有兼容问题 换document.onmousemove这种形式也可以 自己试下问题不大
C. 如何使用jQuery Draggable和Droppable实现拖拽功能
在以前的文章中我已经介绍了web开发中基本拖放原理,现在给出需要完成的功能。最后运行的效果如下图所示:
因 为最终的左侧元素节点是通过Ajax访问后台返回json数据,然后通过Javascript动态生成这种结构,而已不能为动态生成的元素绑定drag事 件,也就不能调用draggable方法,所以我使用了一个称之“中间拖拽容易元素”,这div一直在页面上。只是默认不显示,只要用户开始拖拽左侧的元 素时,它就出现了。当然这里需要自己手动添加很多代码。
复制代码 代码如下:
<div id='draggableDiv' class="ui-widget-content">
中间拖拽容器元素
</div>
<script type="text/javascript">
$("#draggableDiv").draggable({
containment: "parent",
drag: function (event, ui) { console.log("拖拽中"); },
stop: function () { console.log("拖拽结束"); }
});
</script>
第二步:将 要拖的元素内容复制到draggableDiv上。实现拖动父节点时,其下面的子节点元素也要拖放到右边。如果是拖动的子节点元素,就在右边直接显示子节 点元素。父节点和子节点是相对的,因为左侧树形结构的节点可以是无限级的,所以一个元素既可能是子节点元素,也会是父节点元素。通过监听鼠标的 mousedown和mouseup事件,来判断用户在拖动元素
因为最终的左侧元素节点是通过Ajax访问后台返回json数据,然后通过Javascript动态生成这种结构,而已不能为动态生成的元素绑定drag事件,也就不能调用draggable方法,所以我使用了一个称之“中间拖拽容易元素”,这div一直在页面上。只是默认不显示,只要用户开始拖拽左侧的元素时,它就出现了。当然这里需要自己手动添加很多代码。
复制代码 代码如下:
<div id='draggableDiv' class="ui-widget-content">
中间拖拽容器元素
</div>
<script type="text/javascript">
$("#draggableDiv").draggable({
containment: "parent",
drag: function (event, ui) { console.log("拖拽中"); },
stop: function () { console.log("拖拽结束"); }
});
</script>
第二步:将要拖的元素内容复制到draggableDiv上。实现拖动父节点时,其下面的子节点元素也要拖放到右边。如果是拖动的子节点元素,就在右边直接显示子节点元素。父节点和子节点是相对的,因为左侧树形结构的节点可以是无限级的,所以一个元素既可能是子节点元素,也会是父节点元素。通过监听鼠标的mousedown和mouseup事件,来判断用户在拖动元素。
当用户拖动B节点时,首先把B元素上的内容复制给draggableDiv元素,当用户拖动B元素,其实是拖动draggableDiv元素。所以我们要计算出我们点击的B元素的位置,然后让draggableDiv在拖动时候显示正确的位置,然后拖动就是draggableDiv元素,用户看起来是拖动的B节点元素。
复制代码代码如下:
var clickElement = null; $(".threepanels .ptreelist").bind("mousedown",function (event) {
//获取当前mousedown元素的内容
var itemContent = $(this).html(); var draggableDiv = $("#draggableDiv");
$(draggableDiv).css({ "display": "block", "height": 0 });
//将点击的元素内容复制
clickElement = $(this).clone();
var currentdiv = $(this).offset(); $(draggableDiv).css({ "top": currentdiv.top, "left": currentdiv.left }); draggableDiv.trigger(event);
//取消默认行为 return false; });
$("#draggableDiv").mouseup(function (event) { $(this).css({ "height": "0" }); });
//拖动元素时鼠标的位置
var dragDivLeft = 0;
var dragDivTop = 0;
$("#draggableDiv").draggable({ containment: "parent", drag: function (event, ui) { $("#draggableDiv").css({ "width": "260px", "height": "22px" });
$("#draggableDiv").append(clickElement);
var closeTop = $(".closeBar").offset().top;
dragDivLeft = event.target.offsetLeft;
dragDivTop = event.target.offsetTop; },
stop: function () {
//拖拽结束,将拖拽容器内容清空
$("#draggableDiv").html("");
$("#draggableDiv").css({"height":"0"}); }
});
D. 在eclipse j2ee版本里建了web工程,如何使用控件拖拽方式设计网页呢
有相应的插件,但是应该需要收费的,你可以找找破解的,或者用myeclipse,或者用dreamwear拖拽设计好页面,在放到项目中做一些小修改
E. web开发百度地图拖拽后又回到原点这是什么原因
这个只是通过改变移动的位置即坐标,然后最后又将坐标值赋值为最初是值得状态。
F. 如何在固定区域内对图片进行拖拽操作
web里用javascript来做,网上有现成的封装好的脚本库(google一下drag-drop-dom)可以直接将div初始化为drag-drop-div
自己写也行,思路就是对鼠标的事件判断,然后层定位.
位置记录要持久化的话就采用ajax来做
G. c# WebBrowser控件拖拽的问题
用winform得到拖动,然后交互给webbrowser中的脚本代码,然后传递给activeX。
交互参考:http://www.fushanlang.com/blog/c-webbrowser-communicate-with-javascript-1606/
哦,是想实现某些上传控件的功能吧?没做过,我怀疑是webbrowser太精简了,应该有人成功丰富它。
找到一个源码,有时间的话可以参考一下:
http://read.pudn.com/downloads121/sourcecode/windows/csharp/516353/ExWebBrowser.cs__.htm
源码的说明:.net的平台所提供的WebBrowser控件并没有对ActiveX控件的WebBrowser所有事件进行封装,这导致在.net中无法处理某些事件。本代码给出了一个扩展的WebBrowser控件,封装了所有ActiveX WebBrowser控件所提供的事件,对于开发浏览器或相关项目的开发者有参考和帮助。
H. WEB页面如何实现拖拽文件夹上传
目前用户要通过Web上传一个文件是通过 <input type="file /"> 这个标记。具体过程需要在一个很傻的对话框里定位文件夹 -> 在大量的文件里找到目标文件 -> 确定 -> 点“上传”按钮。我们能不能把这个步骤简化,实现拖拽上传呢?
比如说,
1. 在 资源管理器 里选择一个图片
2. 拖拽到一个网页,比如说一个正在编辑的博客
3. 后台AJXJ自动上传这个图片
4. 在正在编辑的博客的当前位置直接插入并显示图片。
我想用javascript实现。(跟AJAX一样,有一点hack的味道。)
原理很简单。首先用户拖拽一个图片到浏览器,浏览器会自动跳转到这个图片。比如说我拖拽 D:\test\1.jpg 到浏览器,浏览器会跳转当前页面到 file:///D:/test/1.jpg。那么我们要做的就是在浏览器跳转之前:
1. 截获body.onunload事件,并取消浏览器的跳转
2. 获知浏览器将要跳转到的页面
3. 自动填写 <input type="file" />的地址
4. AJAX后台上传图片
5. 把图片插入当前的正在编辑位置。
发这个帖子的目的,想跟大家探讨这个设想的可能性。最后希望得出一个结论:可行,还是不可行。如果可行的话我希望深入探讨出一个固定的模式。(像AJAX那样)
I. c# 在WPF中使用webbrowser 拖拽获得图片的问题
这个没办法,要自己去写代码下图片,用HttpWebRequest类就行了
J. Web前端怎样实现像excel那样的按列拖选的表格
Web前端实现像excel那样的按列拖选表格的方法:
1.通过flash,flex实现FLEX 功能强大的datagrid
2.通过jquery插件,js实现
JS实现可编辑的表格,双击可编辑,可以删除行和列,增加行和列,重置,导出表格,也可以上下移动元素
Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽,自动适应表头宽度,可通过 Ajax 连接 XML 数据源,类似 Ext Grid,但基于 jQuery 因此更轻量小巧。