前端设计与实现,使用拖拽来调整交友对象的评分功能

我的一个交友网站,其独特的流程包括,用户通过搜索发现潜在对象,给潜在对象加关注和打分,使用获得2012诺贝尔经济奖的特殊匹配算法计算出相互匹配的对象并推荐給相关用户。在这里,对交友对象的评分功能是此网站的基础功能,其方便和平滑与否关系重大。本视频演示我的设计与实现。

页内拖拽

跨页拖拽

一次点击把目标用户放入一个缓存区,然后利用分页控制走到目的页面,再进行拖拽。好处是能够实现精确控制。
  

想想看,你会如何设计这一功能?

其他特点

精确和强大的筛选器,让用户随心所欲的控制筛选条件。 
常用的筛选组合放在快捷菜单中,方便操作。 
筛选器中的选项和快捷菜单是同步的。
全部Ajax实现,单页应用,无刷屏,省流量,有益性能。 
尽管使用Ajax,却保持了浏览器的历史功能。

问题与思考

在视频的最后部分,鼠标停留的区域是另一个评分编辑控件,这里没有给出细节展示,如果是你,你会如何设计?

外部视频链接: http://v.youku.com/v_show/id_XNzI0NzMwNzQw.html

后话:作为一个偏中间层,后端(参看:深度优化SQL 查询,
提升性能一百倍是什么概念?
)和架构的全栈工程师,UI设计与开发不是我的强项,请前端专家们批评。欢迎到新浪微博和我交流, 微博名:
JohnXhark.

前端设计与实现,使用拖拽来调整交友对象的评分功能,布布扣,bubuko.com

时间: 2024-12-08 16:16:34

前端设计与实现,使用拖拽来调整交友对象的评分功能的相关文章

商品呢拖拽到购物车,appendChild的剪切功能

今天来到了妙味课堂的html5课程的第2张的第8节,讲的是把商品拖拽到购物车的演示.其中有一个关于appendChild的使用,,每次拖拽都会触发这个方法,但是每次之后,却还是只有一个总价,好吧,说不清楚,一起来看程序: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽购物车</title> <

国产网络损伤仪SandStorm -- 只需要上下拖拽能调整链路规则顺序

国产网络损伤仪SandStorm(弱网络测试)可以模拟出带宽限制.时延.时延抖动.丢包.乱序.重复报文.误码.拥塞等网络状况,在实验室条件下准确可靠地测试出网络应用在真实网络环境中的性能,以帮助应用程序在上线部署前能够得到充分地测试,确保应用程序正常运行. “调整链路规则顺序”在网络损伤仪SandStorm的图形化界面里是最容易的操作之一,看图就会. 原文地址:https://www.cnblogs.com/minismb/p/11633423.html

拖拽系列二、利用JS面向对象OOP思想实现拖拽封装

接着上一篇拖拽系列一.JavaScript实现简单的拖拽效果这一篇博客将接着对上一节实现代码利用JS面向对象(OOP)思维对上一节代码进行封装; 使其模块化.避免全局函数污染.方便后期维护和调用:写到这里突然想起一句话“没有任何一个题目是彻底完成的.总还会有很多事情可做......” 我想这句话程序开发大概也适用吧,前端开发人员总是可以结合自己之前学到“拖拽”相关知识,不断扩展.完善.无穷无尽.......     利用匿名函数自执行实现封装 ;(function(){ //do somethi

Android DragAndDrop API 拖拽效果 交换ListView的Item值

前言 Android系统自API Level11开始添加了关于控件拖拽的相关API,可以方便的实现控件的一些拖拽效果,而且比自己用Touch事件写的效果更好.下面就来看下DragAndDrop吧. 使用Android的DragAndDrop框架,我们可以方便的在当前布局中用拖拽的形式实现两个View之间数据的互换.DragAndDrop框架包括一个拖拽事件的类,拖拽监听器,以及一些帮助方法和类. 尽管DragAndDrop主要是为了数据移动而设计,但是我们也可用他做别的UI处理.举个例子,我们可

面向对象实战之封装拖拽对象

面向对象实战之封装拖拽对象 利用前面几章的所涉及到的知识,封装一个拖拽对象.为了能够帮助大家了解更多的方式与进行对比,我会使用三种不同的方式来实现拖拽. 不封装对象直接实现: 利用原生JavaScript封装拖拽对象: 通过扩展jQuery来实现拖拽对象. 本文的例子会放置于codepen.io中,供大家在阅读时直接查看.如果对于codepen不了解的同学,可以花点时间稍微了解一下. 拖拽的实现过程会涉及到非常多的实用小知识,因此为了巩固我自己的知识积累,也为了大家能够学到更多的知识,我会尽量详

JQUERY 拖拽 draggable droppable resizable selectable sortable

今天用了jq ui的拖动碰撞功能,好不容易看到有详细的API解说,记录如下: <script language="JavaScript" type="text/javascript" src="ui/jquery-1.8.2.js"></script> <script language="JavaScript" type="text/javascript" src="

图片查看器(可拖拽,缩放,轮播)

一直都想写一个图片轮播,可是却一直都没有静下心来,今天终于有时间,就来做个图片查看器吧 功能:拖拽,缩放,还原,轮播,透明度 拖拽实现原理:鼠标按下onmousedown,鼠标移动onmousemove,鼠标松开onmouseup释放鼠标按下和移动的函数,一定是按下鼠标的同时进行移动,这里指的都是鼠标左键! 这里的难点就是清除默认事件,反正我是这样认为的,花了好几个小时才弄出来.写完之后发现,鼠标点一下再松开,图片就粘再指针上了,一直跟着指针跑,郁闷了好久,为什么会发生这种事,仔仔细细看了几十遍

Xcode如何拖拽选中文字、拖拽代码

不管是文本编辑,还是代码工具,一般都提供了用鼠标拖拽选中文字到指定地方的功能,但是在Xcode里貌似这样有点儿难,你会发现当想拖动的时候会有时候成功,但是大部分时间都是又处于选择状态.一开始我以为是Mac系统的原因,后来发现在其他地方:浏览器就可以拖动,我想这可能是Xcode里去掉了,但是有时候能拖拽是怎么回事.好吧,我不coding了,非得找出来. 废话不多说了: 点击选中的代码(文字),不要移动和松开鼠标左键,当竖线变成箭头之后就可以拖动了,其实不需要多少时间,基本上就是:不要直接点鼠标左键

HTML5 的拖拽介绍

本文主要介绍与拖拽操作相关的对象及事件信息,但并不涉及太多的源码演示. 一个简单的示例 在html5中要实现拖放操作,相对于以前通过鼠标操作实现,要简单得多,数据安全性也更有保障.只需要以下几步即可. 给被拖拽元素添加draggable属性,如果是文件拖放. 为目标元素添加一个dropzone属性,这一步也不是必须的,可以省略. 在拖拽元素的dragstart中初始化相关的数据信息,主要是DataTransfer对象. 在目标元素的dragover事件中,取消其默认操作. 在目标元素的drop事