我想实现一个右侧图拖动到左侧图的树，修改类型的功能。要在鼠标释放后做后台操作。
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>
后台修改类型要用到的方法：
最佳答案
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
拖拽知道，就是右侧的数据是一页20条，到左边树node的距离各不相同.释放鼠标时触动方法。不好控制。还有树jstree 树的各节点位置也是动态的。与碰撞物。
还有，都是固定id的就非常好处理了，动态数据都是. class类标签。
