jquery弹性云拖动计算功能

　　                                                                                                jquery弹性云拖动计算功能

　　今天来和大家分享下jquery弹性云拖动计算功能：首先html页面必须有的，拖动元素、拖动范围、背景等。

　　拖动效果分为两种:一是根据鼠标拖动像素的区间范围改变拖动元素的位置，二是拖动元素随着鼠标所在像素的改变而同时改变。

　　一是根据鼠标拖动像素的区间范围改变元素的位置:获取拖动元素对象，在他的点下元素事件(这里注意:是点下mousedown而不是点击click)函数中将拖动范围距离浏览器左边的偏移位置。

　　例如:var pw=$(beijing).offset().left;接着嵌套一个document的mousemove移动事件，在此事件函数中获取鼠标的x坐标即像素,此时拖动元素相对于其父元素即拖动背景范围的横向偏移，像素为(鼠标x坐标-背景距离浏览器左边距离pw)，此时需要得到相对应的数据条数 例如:1G 2G 3G 4G 5G等等，每一条对应一个区间，当鼠标拖动到这个区间的时候，将拖动元素移入这个区间。

　　所对应的这条数据的位置 (此时拖动元素相对于背景的位移是=鼠标位移-拖动背景位移-鼠标相对于拖动元素的位移) 位移是横坐标之间的差值。

　　代码为判断此时鼠标像素存在于哪个区间,次数和数据条数相同，(如果觉得代码繁多可以循环执行，根据循环次数改变对应值)区间范围的计算是:区间像素=背景宽度像素/(数据条数-1)。第一条数据没有左边的部分，最后一条条数据没有右边的部分。所以第一条数据的范围应该是0-区间像素/2，此时把拖动元素放在和第一条数据对应的位置(就是修改他的绝对定位的left值)，将对应数据的值传给一个文本域，最后一条道理相同。中间的数据判断像素区间都是:背景宽度像素/(数据条数-1)。

　　比如第二条数据的判断区间：第一条数据区间长度至第一条数据区间长度+正常的区间长度(像素)，把拖动元素放在和此区间对应数据所在的位置，将对应数据的值传给一个文本域，以此类推至最后一条之前。然后独立写一个document的mouseup事件，在事件函数中解除移动事件unbind，也可以在此做价格计算。

　　二是拖动元素随着鼠标所在像素的改变而同时改变：

　　这个就等于用鼠标拖动图片一样，网上有很多的教程，只不过只有横向拖动，和第一种方式差别少了判断多了比例的计算，只是要计算拖动多少像素应该对应的数据数是多少，这有一个比率的计算。就是总共有多少条数据，比如1到100兆，每兆都可以选择到，就有一百条数据。比率=总数据条数/(拖动范围宽度-拖动元素的宽度)。在鼠标拖动的拖动事件中将(拖动元素的中间位置的坐标相对于拖动背景的坐标计算出来乘以比率)就是拖动元素目前所在位置对应的数据数，将他写入文本域。

　　当然还有点击背景让拖动元素改变，文本域中的数据改变，原理差别不是很大，若会以上两步，改变点击事件应该不会太费劲。

       文章来源于西安天互数据。