我研究 jQuery 和 Javascript 已经有一段时间了——但我很难进入为它们编程的思维模式。在找到以前的 stackoverflow 线程并将其修改为我在本次学习练习中想到的规范后，我很难将每个 div 转换为可排序/可拖动的元素。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>seed</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js"></script>
<style type='text/css'>
.redbox {
position: relative;
display: block;
width: 780px;
height: auto;
background: red;
}
.togglecontainer
{
width: 780px;
height: auto;
}
.handler {
width: 780px;
height: auto;
background: yellow;
}
.container {
position: relative;
width: 780px;
height: 780px;
background: blue;
}
.complete { text-decoration: line-through; color: grey;
}
input { padding:2px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; font-size:20px;}
</style>
<script type='text/javascript'>
// taken from http://jsfiddle.net/davidThomas/XsCAN/6/
// http://stackoverflow.com/questions/4639487/remove-specific-box-with-jquery
$(function(){
var counter = 0;
$('#creaters').click(function() {
counter++;
var redbox = $('<div class="redbox"><div class="handler"> ' + (counter) + ')<input name ="thestep" type="text" value="" maxlength="255" size="65" /></div><div class="togglecontainer"></div></div>').appendTo('.container'),
appendbtn = $('<button class="appendbtn">Add a link to a pic/vid</button>').appendTo(redbox.find('.togglecontainer')),
togglebtn = $('<button class="togglebtn">Hide options</button>').appendTo(redbox.find('.handler')),
deletelistbtn = $('<button class="deletelistbtn">X</button>').appendTo(redbox.find('.handler'));
redbox.draggable({
handle: '.handler'
});
appendbtn.click(function() {
var elems = $('<div><input value="some value" type="text" class="inputfield' + (counter) + '"/>' + '<input type="button" class="removebtn" value="x" id="removebtn"' + (counter) + '"/>' + '</div>').insertBefore(redbox.find('.togglecontainer'));
});
$('.removebtn').live('click', function() {
$(this).parent().remove();
});
$('.deletelistbtn').live('click', function() {
$(this).closest('.redbox').remove();
});
togglebtn.click(function() {
var that = this;
$('.togglecontainer', redbox).toggle(10, function() {
var txt = $(that).html();
$(that).html((txt == 'Hide options') ? 'add media' : 'Hide options');
});
});
togglebtn.trigger("click");
});
});
</script>
</head>
<body>
<button id="creaters">Add a Step</button>
<div class="container"></div>
</body>
</html>
目前代码将每个 .redbox 类转换为可拖动的 jquery 元素，但是它们不会“捕捉”到位，不会停留在容器 div 的边界内，也不会在被拖动到新位置后移动它们下方的周围元素.
到目前为止，我已经尝试在容器 div 中启动一个元素并将每个 redbox 元素变成一个
我也尝试过 draggable() 和 sortable() 方法，但遇到困难。
如有任何帮助，我们将不胜感激!
谢谢!
最佳答案
参见 here .
你是这个意思吗？
我用的是可排序的:
$(function(){
var counter = 0;
$('.container').sortable();
$('#creaters').click(function() {
关于javascript - 将一个 div 变成一个可以吸附到位的可拖动元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14045260/