在两个RadListview项之间画一条线 [英] Drawing a line between two RadListview items

查看:90
本文介绍了在两个RadListview项之间画一条线的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

大家好


我正在使用Radlistview拖放功能....我必须将一个列表视图中的项目与其他列表进行匹配...现在,我可以通过拖放n来实现,从而为项目赋予唯一的颜色.更具交互性,我需要在两个radlistview项之间划一条线(以识别已匹配的项)..有人可以建议如何做吗?


在此先感谢
Darshan

Hi all


I m working on Radlistview Drag n drop feature.....I ve to match items in one listview with other ...Right Now Im able to do it using drag and drop n giving unique colors to items ..but to make it more interactive i need to draw a line between the two radlistview items ( to identify which has been matched to which) ..can anyone suggest how to do it ???


Thanks in advance
Darshan

推荐答案

我还没有使用过Telerik的最新版本,但是据我所知,没有内置的解决方案,因此您需要自己编写.

您可以为dragBegin(onMouseDown)和dragEnd(onMouseUp)添加/覆盖一些事件处理程序.在dragBegin中,您应该存储当前的鼠标坐标以备将来使用,我会选择在隐藏字段中使用javascript数组或json.在dragEnd中,对2d坐标执行相同操作.
接下来,您有2个坐标,可以使用许多不同的jQuery插件之一在它们之间画一条线,或者编写自己的坐标( Wikipedia Bresenham [ ^ ]并绘制小div ).

但是,如果可以滚动列表视图,则将更加困难,因为这时您将需要考虑两个列表的滚动高度并使用一些偏移量计算.

可能还有其他/更好的方法,但这就是我可能会这样做的方法.
希望这可以帮助您入门:-)
I haven''t used the latest version of Telerik, but to my knowledge there is no build in solution for this so you will need to write it yourself.

You can add/overwrite some eventhandlers for the dragBegin(onMouseDown) and dragEnd(onMouseUp). In the dragBegin you should store the current mouse coordinates for future use, javascript array or json in a hidden field would be my choice. In the dragEnd do the same for the 2d coordinate.
Next you have 2 coordinates, and you can draw a line between them by using one of many different jQuery plugins, or write your own (Wikipedia Bresenham[^] and plot small divs).

This will however be harder if the listview can be scrolled in, because then you will need to factor in the scroll height of both lists and use some offset calculations.

There might be other/better ways, but this is the way I would probably do it.
Hope this helps you get started :-)


这篇关于在两个RadListview项之间画一条线的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆