jQuery 多个可拖动对象创建
这对我来说是一个复杂的问题。这就是我想要的：
我设计了一个可拖动的 div，并且页面上已经有 1 个实例可供拖动。当用户拖动它时，我想动态创建它的新实例。我还应该能够通过单击按钮将其删除，这样它们就应该都可以访问。
你能指出我这样做的正确途径吗？
这是我到目前为止所拥有的：
$(document).ready(function() {
$('#dragThis').resizable({
stop: function(event, ui) {
var w = $(this).width();
var h = $(this).height();
var tr = $('#contentDiv');
tr.each(function() {
//alert( fields[$(this).index()] )
$(this).height(h - 45);
});
console.log('StopEvent fired')
console.log('Width:' + w);
console.log('Height:' + h)
}
}).draggable(
{
containment: $('body'),
drag: function() {
var offset = $(this).offset();
var offsetImage = $("#<%=dropHere.ClientID %>").offset();
var xPos = offset.left;
var yPos = offset.top;
$('#posX').text('x: ' + xPos);
$('#posY').text('y: ' + yPos);
},
stop: function() {
var finalOffset = $(this).offset();
var finalxPos = finalOffset.left;
var finalyPos = finalOffset.top;
$('#finalX').text('Final X: ' + finalxPos);
$('#finalY').text('Final X: ' + finalyPos);
}
});
这是我的 html：
<div class="dragThis" id="dragThis">
<div class="content" id="contentDiv">
<p>
<asp:Label ID="lblContent" Width="2px" runat="server" Text="Label"></asp:Label>
</p>
</div>
<div class="pointer">
<div class="one">
</div>
<div class="two">
</div>
</div>
</div>
我目前能够调整大小、拖动并获取 1 个 div 的位置。我需要让它适用于多个 div。
请记住，我需要访问这些 div（其中的位置和文本 - 设置和获取）
感谢任何帮助。
谢谢
This is a complicated problem for me. Here is what I want:
I have designed a div which is draggable and 1 instance is already on the page ready for dragging. When user drags it, I want to dynamically create a new instance of it. I also should be able to remove it with the click of a button so they should all be accessable.
Can you point me out the right path to do this?
Here is what I have so far:
$(document).ready(function() {
$('#dragThis').resizable({
stop: function(event, ui) {
var w = $(this).width();
var h = $(this).height();
var tr = $('#contentDiv');
tr.each(function() {
//alert( fields[$(this).index()] )
$(this).height(h - 45);
});
console.log('StopEvent fired')
console.log('Width:' + w);
console.log('Height:' + h)
}
}).draggable(
{
containment: $('body'),
drag: function() {
var offset = $(this).offset();
var offsetImage = $("#<%=dropHere.ClientID %>").offset();
var xPos = offset.left;
var yPos = offset.top;
$('#posX').text('x: ' + xPos);
$('#posY').text('y: ' + yPos);
},
stop: function() {
var finalOffset = $(this).offset();
var finalxPos = finalOffset.left;
var finalyPos = finalOffset.top;
$('#finalX').text('Final X: ' + finalxPos);
$('#finalY').text('Final X: ' + finalyPos);
}
});
and here is my html:
<div class="dragThis" id="dragThis">
<div class="content" id="contentDiv">
<p>
<asp:Label ID="lblContent" Width="2px" runat="server" Text="Label"></asp:Label>
</p>
</div>
<div class="pointer">
<div class="one">
</div>
<div class="two">
</div>
</div>
</div>
I'm currently able to resize, drag and get location of 1 div. I need to make it work for multiple divs.
Please remember that I need to access to these divs (positions and texts inside them - setting and getting)
Any help is appreciated.
Thank you
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
将您的代码包装到可调用函数中。然后，当您创建新的 div 时，您应该使用“destroy”方法来销毁 ressized+draggable (
) 的当前实例，然后运行函数来重新初始化 ressized+draggable；
Wrap your code into a callable function. Then, when you create new div you should use "destroy" methods to destory current instances of resizable+draggable (
) and then run function to reinitialize resizable + draggable;