如何使用悬停droppable函数

Question

如何通过悬停Droppable函数获取元素的ID？

我希望将拖放内容ID悬停在缩进图标上。任何人都可以帮我解决这个问题吗？

$("ul li").droppable({

	over: function(event, ui) {

		var drag_id = ui.draggable.attr('id');

		$("#"+drag_id).css({
			"background":"#fff","border-top":"1px solid #333","border-bottom":"1px solid #333"
		});
	},
	drop: function(event, ui) {

		var drag_id = ui.draggable.attr('id');
		var target_id = event.target.id;  
		
		$("#"+drag_id).css({
			"background":"#fff","border-top":"1px solid #333","border-bottom":"1px solid #333"
		});
		setInterval(function(){
			$("#"+drag_id).css({
				"border-top":"","border-bottom":""
			});
		}, 2000);
		var from_pos = drag_id;
		var to_pos = target_id;
		changepositions(from_pos,to_pos);
		// existing stuff 
	}
});

Answer 1

请参阅此link。它描述了使用jquery-ui拖放元素时触发的不同事件。 strcpy()和activate可用作参数的事件event可能对您有所帮助。 ui参数将包含ui元素，您可以使用jquery的handler方法从中获取拖动元素的id。

Answer 2

如果你查看over，它有一个event参数，你可以得到它target然后它id就像这样

    over: function(event, ui) {

      var drop_id = event.target.id; //<-- 5
      alert(drop_id);

      var drag_id = ui.draggable.attr('id');
      alert(drop_id);                //<-- 6

      //other stuff
    },

编辑：由OP

添加

谢谢我用过这个

$(".indent").droppable({

        drop: function(event, ui) {

            console.log($(this), ui.draggable);

            $(this).append(ui.draggable);

            var target_id = event.target.id; //<--5
            alert(target_id);

            var drag_id = ui.draggable.attr('id');
            alert(drop_id);                //<-- 6

        },
        hoverClass: 'drop-area',
        greedy: true,
        tolerance: "pointer"
    });