Jquery 如何在javascript附加字段上使用draggable?
我正在使用Jquery Dragable创建一个应用程序的一部分,该应用程序创建输入,输入必须是可拖动的,在下面的项目(JSFIDLE)中,您会看到只有创建的字段不可拖动,但直接添加到html中的字段可以拖动,为什么 html:Jquery 如何在javascript附加字段上使用draggable?,jquery,html,draggable,jquery-ui-draggable,Jquery,Html,Draggable,Jquery Ui Draggable,我正在使用Jquery Dragable创建一个应用程序的一部分,该应用程序创建输入,输入必须是可拖动的,在下面的项目(JSFIDLE)中,您会看到只有创建的字段不可拖动,但直接添加到html中的字段可以拖动,为什么 html: <div class="input_fields_wrap"> <button class="add_field_button">Add More Fields</button> <div class="dr
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div class="draggable ui-widget-content">
<input type="text" name="mytext[]"/>
<a href="#" class="remove_field">x</a>
</div>
</div>
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append(''
+ '<div class="draggable ui-widget-content added">'
+ '<p>not draggable anymore, why ?</p>'
+ '<input type="text" name="mytext[]"/>'
+ '<a href="#" class="remove_field">x</a>'
+ '</div>'
); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
$( ".draggable" ).draggable({ grid: [ 5, 5 ], snap: true });
});
添加更多字段
javascript:
<div class="input_fields_wrap">
<button class="add_field_button">Add More Fields</button>
<div class="draggable ui-widget-content">
<input type="text" name="mytext[]"/>
<a href="#" class="remove_field">x</a>
</div>
</div>
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append(''
+ '<div class="draggable ui-widget-content added">'
+ '<p>not draggable anymore, why ?</p>'
+ '<input type="text" name="mytext[]"/>'
+ '<a href="#" class="remove_field">x</a>'
+ '</div>'
); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
$( ".draggable" ).draggable({ grid: [ 5, 5 ], snap: true });
});
$(文档).ready(函数(){
var max_fields=10;//允许的最大输入框数
var wrapper=$(“.input_fields_wrapp”);//字段包装器
var add_button=$(“.add_字段_button”);//添加按钮ID
var x=1;//初始文本框计数
$(添加按钮)。单击(函数(e){//在添加输入按钮上单击
e、 预防默认值();
如果(x”
+ ''
+ ''
+ ''
);//添加输入框
}
});
$(包装器)。在(“单击“,”.remove_字段)上,函数(e){//用户单击remove text
e、 preventDefault();$(this).parent('div').remove();x--;
})
$(“.draggable”).draggable({grid:[5,5],snap:true});
});
如何解决这个问题?这个问题是因为当页面加载时,您只在DOM中的元素上实例化
draggable()
。要使新元素可拖动,需要在将它们附加到DOM后对它们调用draggable。试试这个:
var max_fields = 10; // maximum input boxes allowed
var wrapper = $(".input_fields_wrap");
var add_button = $(".add_field_button");
var draggableOptions = { grid: [ 5, 5 ], snap: true }
$(add_button).click(function(e) {
e.preventDefault();
if (wrapper.find('.draggable').length < max_fields) {
$('<div class="draggable ui-widget-content added">'
+ '<p>not draggable anymore, why ?</p>'
+ '<input type="text" name="mytext[]"/>'
+ '<a href="#" class="remove_field">x</a>'
+ '</div>').appendTo(wrapper).draggable(draggableOptions); // < important change here
}
});
$(wrapper).on("click", ".remove_field", function(e) {
e.preventDefault();
$(this).parent('div').remove();
})
$(".draggable").draggable(draggableOptions);
var max_fields=10;//允许的最大输入框数
变量包装=$(“.input_fields_wrap”);
var add_button=$(“.add_field_button”);
var draggableOptions={grid:[5,5],snap:true}
$(添加按钮)。单击(功能(e){
e、 预防默认值();
if(wrapper.find('.draggable').length”
+ ''
+ ''
+“”).appendTo(wrapper).draggable(draggableOptions);//<此处有重要更改
}
});
$(包装器)。在(“单击”,“删除”字段)上,函数(e){
e、 预防默认值();
$(this.parent('div').remove();
})
$(“.draggable”).draggable(draggableOptions);
您只需将单击事件与可拖动关联即可
$(文档).ready(函数(){
var max_fields=10;//允许的最大输入框数
var wrapper=$(“.input_fields_wrapp”);//字段包装器
var add_button=$(“.add_字段_button”);//添加按钮ID
var x=1;//初始文本框计数
$(添加按钮)。单击(函数(e){//在添加输入按钮上单击
e、 预防默认值();
如果(x”
+ ''
+ ''
+ ''
);//添加输入框
}
});
$(包装器)。在(“单击“,”.remove_字段)上,函数(e){//用户单击remove text
e、 preventDefault();$(this).parent('div').remove();x--;
})
$('.add_field_button')。单击(函数(){
$(“.draggable”).draggable({grid:[5,5],snap:true});
});
})
.draggable{填充:30px;背景:红色;宽度:200px;光标:指针;}
.添加了{背景:黄色;}
添加更多字段