双击可拖动项 [英] Apply double click on draggable items
问题描述
我有一个黄色按钮,可以将其拖放到灰色面板上.我使用"handleDragStop"功能来处理用户拖放黄色按钮时需要完成的所有任务.一切都很好.但是,我不知道如何启用用户双击黄色按钮并具有与拖放相同的行为?
I have a yellow button that can be dragged and dropped on the gray panel. I use "handleDragStop" function to handle all the tasks that need to be done when users drag and drop the yellow button. Everything works great. However, I wonder how do I enable the behavior where users double click on the yellow button and have the same behavior as when they drag and drop?
$(".top-icon").draggable({
connectToSortable: '#content',
helper: myHelper,
stop: handleDragStop
});
function handleDragStop(event, ui) {
var current_text = '<div class="color-box"><b>Yellow Box ' + i + '</b>' + '<div class="yellow-content">' + '<div class="item">Item 1</div>' + '<div class="item">Item 2</div>' + '<div class="item">Item 3</div>' + '<div class="add-item">Add New Item</div>' + '</div>' + '</div>';
$('#content .top-icon').after(current_text);
i++;
var $new_insert_item = $('#content .top-icon').next();
$('#content .top-icon').remove(); // remove the clone .top-icon inside #content
console.log('hi');
// when click on Add New Item button
}
// end of handleDragStop
像这样调用draggable之后,我可以应用dblclick事件:
I can apply dblclick event after calling draggable like this:
$(".top-icon").draggable({
connectToSortable: '#content',
helper: myHelper,
stop: handleDragStop
})
.dblclick(function() {
alert('hi');
// Do the same tasks as handleDragStop....
});
但是,我想知道是否有一种方法可以共享可拖动对象和dblclick的handleDragStop功能,这样我就不需要维护可拖动对象的handleDragStop函数和另一个类似dblcclick的handleDragStop函数吗?谢谢您的帮助.
However, I wonder if there is a way I can share the functionality of handleDragStop for both draggable and dblclick so that I don't need to maintain a function handleDragStop for draggable and another similar function as handleDragStop for dblcclick? Thank you for your help.
这是 jsfiddle
推荐答案
您的handleDragStop()函数在两个事件处理程序中均应正常工作.其中唯一可拖动的特定代码是$('#content .top-icon').after(current_text);
和CMIIW,但我不明白为什么您不能同样出色地执行$('#content').append(current_text);
,这在两种情况下均有效.试试这个: http://jsfiddle.net/tonicboy/Tt7Fb/
Your handleDragStop() function should work fine in both event handlers. The only draggable-specific code in it was $('#content .top-icon').after(current_text);
and CMIIW but I don't see why you couldn't do $('#content').append(current_text);
just as well, which would work in both cases. Try this: http://jsfiddle.net/tonicboy/Tt7Fb/
JS:
$(function () {
$('#content').sortable({
placeholder: 'ui-state-highlight'
});
$(".top-icon").draggable({
connectToSortable: '#content',
helper: myHelper,
stop: handleDragStop
}).dblclick(function(e) {
handleDragStop(e);
});;
function myHelper(event) {
return $(this).clone();
}
var i = 1;
function handleDragStop(event, ui) {
debugger;
var current_text = '<div class="color-box"><b>Yellow Box ' + i + '</b>' + '<div class="yellow-content">' + '<div class="item">Item 1</div>' + '<div class="item">Item 2</div>' + '<div class="item">Item 3</div>' + '<div class="add-item">Add New Item</div>' + '</div>' + '</div>';
$('#content').append(current_text);
i++;
var $new_insert_item = $('#content .top-icon').next();
$('#content .top-icon').remove(); // remove the clone .top-icon inside #content
console.log('hi');
// when click on Add New Item button
}
// end of handleDragStop
$('#content').on('click', '.add-item', function () {
var $this = $(this);
var item_count = $this.siblings('.item').length + 1;
console.log(item_count);
var str_item = '';
str_item = '<div class="item">Item ' + item_count + '</div>';
$(str_item).insertBefore($this);
});
});
这篇关于双击可拖动项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!