代码如下：
现在我使用点击事件来更改选定的点样式。
但我的问题是：
如何实现拖动dotline中的点图标？
请帮助我，我试试几个小时。
<title>Drag</title>
<body>
<div class="b_step33">
<div class="block_right">
<ul class="list">
<li class="dot">
<div class="dotline" id="hc_pc">
<i class="dot1" onClick="$(this).parent().find('i').removeClass('selected');$(this).addClass('selected');"></i>
<i class="dot2" onClick="$(this).parent().find('i').removeClass('selected');$(this).addClass('selected');"></i>
<i class="dot3 selected" onClick="$(this).parent().find('i').removeClass('selected');$(this).addClass('selected');"></i>
<i class="dot4" onClick="$(this).parent().find('i').removeClass('selected');$(this).addClass('selected');"></i>
<i class="dot5" onClick="$(this).parent().find('i').removeClass('selected');$(this).addClass('selected');"></i>
</div>
</li>
</ul>
</div>
</div>
</body>
答案 0 :(得分：1)
这是我的方式 - http://jsfiddle.net/9NpS4/34/
我已经整理了内联onClick，添加了一个可选择状态的可拖动元素，该元素移动到所选项目的位置，这是在页面加载时完成的，每次点击其中一个点。
<强>的jQuery
$("#draggable").draggable({ snap: '.snappable'});
$('i.snappable').click(function() {
$('i.snappable').removeClass('selected');
$(this).addClass('selected');
changePosition();
});
$(document).ready(function() {
changePosition();
});
function changePosition() {
var position = $("i.selected").position();
var left = position.left;
// $("i#draggable").css('left', left);
// animated version looks more polished to me but you can use this line if you want to
$("i#draggable").animate({
left: left,
}, 1000, function() {
// Animation complete.
});
}
请注意，您需要在jQueryUI库中添加draggable才能生效。
<强> HTML
<li class="dot">
<div class="dotline" id="hc_pc">
<i id="draggable"></i>
<i class="dot1 snappable"></i>
<i class="dot2 snappable"></i>
<i class="dot3 snappable selected"></i>
<i class="dot4 snappable"></i>
<i class="dot5 snappable"></i>
</div>
</li>
<强> CSS
i#draggable {
position: relative;
left: 0;
background:url(http://i.imgur.com/ybhGSUc.png) no-repeat;
z-index: 999;
}
修改
可拖动的物体有点混乱 - 可以拖到任何地方，试试这个：
$("#draggable").draggable({ snap: '.snappable', snapMode: "inner", containment: "parent"});