javascript实现鼠标选取拖动或Ctrl选取拖动

*{position:absolute;}
#panel *{border:1px solid gray}

/**********判断浏览器**********/
var isIE = false;
if(document.all) isIE = true;
/*******HashArray*******/
function HashArray(){
this.keyList = new Array();
this.put = function(key, value){
this[key] = value;
if(!this.containsKey(key)){
this.keyList.push(key);
}
}

this.size = function(){
return this.keyList.length;
}

this.containsKey = function(key){
if(this.keyList.length == 0) return false;

var keyStr = this.keyList.join(",") + ",";

if(keyStr.indexOf(key + ",") == -1){
return false;
}else{
return true;
}
}

this.get = function(key){
return this[key];
}

this.keySet = function(){
return this.keyList;
}

this.isEmpty = function(){
return this.keyList.length==0;
}

this.remove = function(key){
if(this.containsKey(key)){
delete this[key];
this.keyList.splice(this.getIndex(key), 1);
}
}

this.removeAll = function(key){
for(var i=0;i originX){
divMove.style.left = originX+ "px";
}else divMove.style.left = (x-2)+ "px";

if(y > originY){
divMove.style.top = originY+ "px";
}else divMove.style.top = (y-2)+ "px";
}

}

/**********处理mousedown事件********/
function mousedown(e){
if(isIE){
if(event.srcElement.id == "panel"){
originX=event.x;
originY=event.y;
isMouseDown=true;
}else{
isDrag = true;
}
}else{
if(e.target.id == "panel"){
originX=e.pageX;
originY=e.pageY;
isMouseDown=true;
}else{
isDrag = true;
}
}
}

/**********处理mouseup事件********/
function mouseup(e){
if(isIE){
if(event.srcElement.id == "divMove" || event.srcElement.id == "panel"){
selectObjects();
isMouseDown=false;
divMove.style.display='none';
}else{
if(DragObject.curObj) DragObject.curObj.endDrag();
isDrag = false;
}
}else{
if(e.target.id == "divMove" || e.target.id == "panel"){
selectObjects();
isMouseDown=false;
divMove.style.display='none';
}else{
if(DragObject.curObj) DragObject.curObj.endDrag();
isDrag = false;
}
}
}

/*********选中对象********/
function selectObjects(){
for(var i=0;i divMove.offsetLeft && objX divMove.offsetTop && objY

中国是一个发展中国家

var divMove = $("divMove");
var elems = $("panel").children;
document.onmousemove=moveDiv;
document.onmousedown=mousedown;
document.onmouseup=mouseup;

for(var i=0;i

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

(0)

相关推荐

  • js选取多个或单个元素的实现代码(用class)

    复制代码 代码如下: function getElementsByClassName(elem_name,elem_tags) { //elem_name:查询的class名,elem_tags:在哪个元素下查找 if(elem_tags == null) { elem_tags = '*'; } var all_elem = document.getElementsByTagName(elem_tags);//返回一个元素数组 var arr = []; //定义一个空数组,用于存放结果 fo

  • AngularJS实现全选反选功能

    AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. 这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: <!DOCTYPE html> <html lang="en&quo

  • js实现checkbox全选、不选与反选的方法

    本文实例讲述了js实现checkbox全选.不选与反选的方法.分享给大家供大家参考.具体分析如下: 一.思路: 1. 获取元素 2. 给全选 不选 反选添加点击事件 3. 用for循环checkbox 4. 把checkbox的checked设置为true即实现全选 5. 把checkbox的checked设置为false即实现不选 6. 通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设

  • JavaScript选取(picking)和反选(rejecting)对象的属性方法

    有时候我们需要将一个对象的某些属性选取出来,比方说我们有一个用数组表示的数据库表,我们需要一些函数来 select (选取) 几个字段: function pick(obj, keys) { return keys.map(k => k in obj ? {[k]: obj[k]} : {}) .reduce((res, o) => Object.assign(res, o), {}); } const row = { 'accounts.id': 1, 'client.name': 'Joh

  • ExtJS如何设置与获取radio控件的选取状态

    获取 复制代码 代码如下: function IsChecked(radioId) { return Ext.getCmp(radioId).checked; } 设置 复制代码 代码如下: function SetRadio(radioId, isChecked) { Ext.getCmp(radioId).setValue(isChecked);//或者setValue("on")也可以设置为选中 }

  • js实现checkbox全选和反选示例

    复选框全选示例 复制代码 代码如下: <input type="checkbox" name="selectall" value=on onclick="selectAll()"> function selectAll(form) { var obj = document.getElementsByName('selectall'); var cks = document.getElementsByTagName("inpu

  • JS获得选取checkbox整行数据的方法

    本文实例讲述了JS获得选取checkbox整行数据的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>js</title> </head> <script language="java

  • javascript实现简单的全选和反选功能

    本文实例讲解了javascript实现简单的全选和反选功能的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选反选</title> </head> <body> <input type="butt

  • javascript下兼容firefox选取textarea文本的代码

    主要用到的js代码 复制代码 代码如下: function getSelectedText(){         var selectedText;         var textField=document.getElementById('inputTextarea');         if(window.getSelection) selectedText=getTextFieldSelection(textField);//getTextFieldSelection(document.

  • 两种不同的方法实现js对checkbox进行全选和反选

    通过两种不同的方法实现用js来对checkbox进行全选和反选: 方法一: 1:js实现checkbox的 全选 功能: 复制代码 代码如下: function checkAll() { var code_Values = document.getElementsByTagName("input"); for(i = 0;i < code_Values.length;i++){ if(code_Values[i].type == "checkbox") { c

随机推荐