Can someone help me please...I have an issue with cloning an element and it's functionality.
I have a draggable module that has an edit/delete functionality attached to it that works great. But when I drag it and it gets cloned and I drop it in the droppable area the clone loses it's edit/delete functionality. The buttons are still there but they won't function.
I really need to know what I'm doing wrong here.
Here's my code for it...
var xLabsConnect = {
jQuery : $,
settings : {
columns : '.column',
columnsNav : '.columnNav',
widgetSelector: '.widget',
handleSelector: '.widget-head',
contentSelector: '.widget-content',
widgetDefault : {
movable: true,
removable: true,
collapsible: true,
editable: true,
},
widgetIndividual : {
intro : {
movable: false,
removable: false,
collapsible: false,
editable: false
}
}
},
init : function () {
this.attachStylesheet('../css/dragstyles.css');
this.addWidgetControls();
this.makeSortable();
},
getWidgetSettings : function (id) {
var $ = this.jQuery,
settings = this.settings;
return (id&&settings.widgetIndividual[id]) ? $.extend({},settings.widgetDefault,settings.widgetIndividual[id]) : settings.widgetDefault;
},
addWidgetControls : function () {
var xLabsConnect = this,
$ = this.jQuery,
settings = this.settings;
$(settings.widgetSelector, $(settings.columns)).each(function () {
var thisWidgetSettings = xLabsConnect.getWidgetSettings(this.id);
if (thisWidgetSettings.removable) {
$('<a href="#" class="remove">CLOSE</a>').mousedown(function (e) {
e.stopPropagation();
}).click(function () {
if(confirm('This widget will be removed, ok?')) {
$(this).parents(settings.widgetSelector).animate({
opacity: 0
},function () {
$(this).wrap('<div/>').parent().slideUp(function () {
$(this).remove();
});
});
}
return false;
}).appendTo($(settings.handleSelector, this));
}
if (thisWidgetSettings.editable) {
$('<a href="#" class="edit">EDIT</a>').mousedown(function (e) {
e.stopPropagation();
}).toggle(function () {
$(this).css({backgroundPosition: '-66px 0', width: '55px'})
.parents(settings.widgetSelector)
.find('.edit-box').show().find('input').focus();
return false;
},function () {
$(this).css({backgroundPosition: '', width: ''})
.parents(settings.widgetSelector)
.find('.edit-box').hide();
return false;
}).appendTo($(settings.handleSelector,this));
$('<div class="edit-box" style="display:none;"/>')
.append('<ul><li class="item"><label>Change the title?</label><input value="' + $('h4',this).text() + '"/></li>')
.insertAfter($(settings.handleSelector,this));
}
});
$('.edit-box').each(function () {
$('input',this).keyup(function () {
$(this).parents(settings.widgetSelector).find('h4').text( $(this).val().length>20 ? $(this).val().substr(0,20)+'...' : $(this).val() );
});
$('ul.colors li',this).click(function () {
var colorStylePattern = /\bcolor-[\w]{1,}\b/,
thisWidgetColorClass = $(this).parents(settings.widgetSelector).attr('class').match(colorStylePattern)
if (thisWidgetColorClass) {
$(this).parents(settings.widgetSelector)
.removeClass(thisWidgetColorClass[0])
.addClass($(this).attr('class').match(colorStylePattern)[0]);
}
return false;
});
});
var activelist = $(".activemodules").sortable({
revert: false,
placeholder: 'widget-placeholder',
forcePlaceholderSize: true,
opacity: 0.7,
});
$(".allmodules li").draggable({
connectToSortable: ".activemodules",
helper: "clone",
opacity: 0.7,
revert: 300,
delay: 100,
});
},
attachStylesheet : function (href) {
var $ = this.jQuery;
return $('<link href="' + href + '" rel="stylesheet" type="text/css" />').appendTo('head');
},
};
xLabsConnect.init();
Thank you in advance guys.