JQuery实时和可拖动事件，其中包含动态创建的元素

Posted 2021-02-26

php code is CakePHP style, replace with regular html

<?php /* PHP code is CakePHP style, replace with regular html */
echo $javascript->link('ui/ui.core.js', false);
echo $javascript->link('ui/ui.draggable.js', false);
echo $javascript->link('ui/ui.droppable.js', false);
?>
 
<script type="text/javascript">
	jQuery(document).ready(function(){
 
jQuery('.workout-event').live("mouseover", function() { 
	if (!$(this).data("init")) { 
		$(this).data("init", true); 
		jQuery(this).draggable({
			cancel: 'a.ui-icon',
			revert: 'invalid',
			containment: 'ul.calendar',
			helper: 'clone',
			cursor: 'move'
		});
	}
});
 
jQuery('.day-holder').droppable({
	accept: '.workout-event',
	activeClass: 'ui-state-highlight',
	drop: function(ev, ui) {
		droppedWorkout(ui.draggable,$(this));
	}
});
 
var url = "<?php echo $html->url(array('action'=>'move'))?>";
function droppedWorkout(item, target) {
	var query = url + '/' + item.attr('rel') + '/' + target.attr('title');
 
	jQuery.getJSON(query, function(data){
		item.hide();
		item.appendTo(target.find('.event-holder')).fadeIn();
	});
}
 
});
</script>