jQuery拖拽&删除模拟插件
jQuery Drag & Drop Simulate Plugin
提前感谢你看了这个!我在模拟阻力时遇到了麻烦。jQuery UI通过扩展插件提供的drop特性:
https://github.com/j-ulrich/jquery-simulate-ext/blob/master/doc/drag-n-drop.md文档使用了以下内容,我对其进行了修改以满足我的需要:
$('#draggableDiv').simulate("drag", {dragTarget: otherDiv});
Changed to this:
$('#placeme').simulate("drag", {dragTarget: $("#page1")});
我的警报消息从未弹出,因此很明显,drop功能从未被触发,我不知道为什么。手动拖动对象到page1的行为正常。
JSFiddle:http://jsfiddle.net/d2fdvxhz/8/
HTML:<div class="container">
<div id="view-port">
<div id="placeme" class="droppableShape">
<img src="https://upload.wikimedia.org/wikipedia/en/6/6f/Smiley_Face.png" width="25" height="25" />
</div>
<button id="testme">Simulate Drop</button>
<div class="page" id="page1" style="background-image: url(http://images.huffingtonpost.com/2012-08-15-1CanvasPanelInstall5psd.jpg);"></div>
<!-- Pages Here -->
</div>
</div>
JS:
$(document).ready(function(){
$(".droppableShape").draggable({
helper:'clone'
});
$(".page").droppable({
accept: ".droppableShape",
tolerance: 'fit',
drop: function(event,ui){
alert("Drop Detected");
var new_field = $(ui.helper).clone().removeClass('droppableShape');
var droppable_page = $(this);
var droppableOffset = $(this).offset();
new_field.css('top', ui.position.top - droppableOffset.top);
new_field.css('left', ui.position.left - droppableOffset.left);
// Set Draggable Options
new_field.draggable({
containment: droppable_page,
stop: function(event, ui) {
// Save position after dragging stops
$(this).data("x_cord", ui.position.left);
$(this).data("y_cord", ui.position.top);
$(this).draggable( "disable" );
}
});
// Add to drop area
$(this).append(new_field);
}
});
$( "#testme" ).click(function() {
$('#placeme').simulate("drag", {
dragTarget: $("#page1")
});
console.log("Simulate Attempted");
});
});
你应该使用
$('#placeme').simulate("drag-n-drop", {
如这里所示
工作小提琴如果你只模拟一个拖放,则永远不会发生拖放
相关文章:
- 如何在Angular2中使用jQuery插件
- 在VanillaJS中模拟模型双向数据绑定
- 可以前端maven插件使用节点,npm已经安装
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- 我的jQuery插件参数没有正确启动,遇到了问题
- 如何在elfinder插件(一个文件管理器插件)上获得上传前事件
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- TableExport jquery插件:文件名和扩展名问题
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- jQuery插件-从插件中调用公共方法
- 压缩phonegap中ios的图像插件
- 使用jasmine模拟对服务器的调用
- jQuery粘性插件可变顶部间距
- 模拟谷歌地图中的点击
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 高亮显示与数组字符串一起使用时文本插件中断
- 如何为jQuery屏蔽输入插件创建一个允许字母数字、空格和重音字符的掩码
- Wordpress插件根据需要加载js和css
- JQuery JQGrid插件,如何通过点击链接模拟工具栏过滤操作
- jQuery拖拽&删除模拟插件