|
|
本帖最后由 邹胖胖 于 2017-7-26 17:49 编辑
我的布局是这样：我用div把页面分成左右两块，两边都放的<list>，我在list中<li>中放了人像照片和人员姓名，姓名显示在图片的下方，将左边的<li>拖拽到右边的list中表示选择该条信息，并将该条信息增加到右边的<list>对应的data中，同时从左边的<list>对应的data中删除；反之，从右边拖拽到左边表示取消选择，并将数据增加到左边的data，同时将数据从右边的data中删除。关于拖拽我仿照3.6版本中你们的案例写的，现在有一下几个问题：
源代码：
- Model.prototype.dragAdd = function(){
- var id = this.getIDByXid("wxz");
- touch.on('#' + id,'touchstart',function(ev){
- ev.preventDefault();
- });
- var dx,dy;
- touch.on('#' + id,'drag',function(ev){
- dx = dx || 0;
- dy = dy || 0;
- var offfx = "0px";
- var offy = "0px";
- //判断是已经将元素拖拽到了屏幕之外去了
- if(dx + ev.x > window.innerWidth){
- offx = window.innerWidth;
- } else{
- offx = dx + ev.x;
- }
- if(dy + ev.y > window.innerHeight){
- offy = window.innerHeight;
- } else{
- offy = dy + ev.y;
- }
- this.style.webkitTransform = "translate3d(" + offx + "," + offy + ",0)";
- });
- touch.on('#' + id,'dragend',function(ev){
- //再次判断元素是否被拖拽到屏幕之外去了
- if(dx + ev.x > window.innerWidth){
- dx = window.innerWidth;
- }else{
- dx += ev.x;
- }
- if(dy + ev.y > window.innerHeight){
- dy = window.innerHeight;
- }else{
- dy += ev.y;
- }
- })
- }
1.按照你们的案例中的写法，就是在onLoad方法中调用dragAdd 方法，根据给定的xid，对元素的拖拽进行监听，但是我的list中每个li的xid都是一样的，那每次用的dx和dy都是上一次拖动完给定的值，就造成了，如果每次退拽的<li>都是一个的话，可以正常拖拽，如果每次拖拽的<li>不一样，那dx和dy就不是本次拖拽的<li>的正确x和y值；
2.我的Xid是<li>的，那监听的应该是整个<li>元素，可是为什么拖拽的时候只拖动了图片，没有连同姓名一起拖拽呢？
3.我在代码中判断元素是否被拖拽出了屏幕，但是没有生效，还是被拖到屏幕外部去找不到了，怎么将退拽的范围控制在整个屏幕内？
4.我想实现的是在完成拖拽后不是将元素放在我停留的位置，而是判断该元素所处位置是否在左边或右边的div里，然后去取得当前拖拽的<li>元素对应的row，再去进行业务处理，将退拽过来的元素增加到对应的<list>对应的data中去，这样的话元素也会被正正方方地放到<list>里面。
|
|
IP卡
狗仔卡
发表于 2017-7-26 17:35:43
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
楼主![A_TK~4DP9}]URKI[7DY7KH6.png](data/attachment/forum/201707/27/113619k9b9xb87pke3588o.png "A_TK~4DP9}]URKI[7DY7KH6.png")
