首页 新闻 赞助 找找看

我想实现一个右侧图拖动到左侧图的树,修改类型的功能。要在鼠标释放后做后台操作。

0
悬赏园豆:10 [已解决问题] 解决于 2017-09-04 11:24

上面的数据是物品的id,左边树会取到node.id,就是物品的类别,右边li里有各种数据,现在要实现的是拖动右边的模块区到左侧树文件夹,触碰方法,修改物品类型,然后再刷新,要求鼠标释放后再触动后台方法 。

左边树定义如下:
  <div id="treeview" class="treeview" style="height:1000px;overflow:auto;vertical-align:top"></div>

右侧数据区:

  <ol class='grid' id='frame'>
                                    @foreach (var item in EntityList.EntityList)
                                    {
                                        <li class='frame' >
                                            <div style="margin-top:-10px;"><input type="checkbox" name="remarkItem" value="@item.Id" /></div>                                           
                                            <div class='inset'>
                                                <div style="display:none" class="classType">@item.CategoryId</div>
                                                <div class='image'><img alt=""  src="@item.Images" /></div>
                                                <div class='info'>
                                                    <div class='shares'>
                                                        <div class='title'>@item.Id</div>
                                                        <div class='description'>@item.Description</div>
                                                        <div class='description'><span>收藏数:</span>@item.CollectedNumber</div>
                                                        <div class='description'><a href="javascript:void(0)" val="@item.Id" class="delete">删除</a></div>

                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                    }
                                </ol>

后台修改类型要用到的方法:

 

 

renshen4322的主页 renshen4322 | 初学一级 | 园豆:5
提问于:2017-02-27 11:55
< >
分享
最佳答案
0

可以用html5的拖拽功能,我记得好像所有元素都可以拖拽

可以拖拽的元素:

<div draggable="true" id="drag"></div>

接收拖拽的元素

<div id="ondrop">拖拽</div>

js代码

var dragDiv = document.getElementById("drag");

var ondropDiv = document.getElementById("ondrag");

//开始拖拽事件

dragDiv.ondragstart = function(e){

  var dragText = dragDiv.innerHTML;//text:拖拽;

  e.dataTransfer.setData("text",dragText);//事件传参;

}

ondropDiv.ondragover  = function(e){

  e.preventDefault();//允许拖拽

}

ondropDiv.ondrop = function(e){

  var data = e.dataTransfer.getData("text");//得到事件传递的参数

  //做些其他事情,例如ajax

}

差不多就这些吧,不过有些浏览器不支持html5的一些新特性

收获园豆:10
hjghhh | 菜鸟二级 |园豆:214 | 2017-02-28 11:14

拖拽知道,就是右侧的数据是一页20条,到左边树node的距离各不相同.释放鼠标时触动方法。不好控制。还有树jstree 树的各节点位置也是动态的。与碰撞物。

renshen4322 | 园豆:5 (初学一级) | 2017-02-28 18:02

还有,都是固定id的就非常好处理了,动态数据都是. class类标签。

renshen4322 | 园豆:5 (初学一级) | 2017-02-28 18:29
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册