{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 倾城 Initia 的问题《Remove a dragged element and reset cursor with jQu》','https://www.manongdao.com/q-658213.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have a problem using drag and drop with jQuery. Here's a very simple fiddle that shows what I mean (http://jsfiddle.net/Znt44/1/):
$('#drop').droppable({
drop: function (e, ui) {
ui.draggable.remove();
}
});
$('#drag').draggable({
cursor: 'move'
});
As you see, I set the cursor to a crosshair when dragged, which works.
If you drop the green box on the red one, the cursor will not reset. It looks like the cursor is attached to the red box as well, and is not resetted.
If you drop the green box anywhere else, the cursor is resetted perfectly.
What is the proper way to reset the cursor?
Or is something wrong with the remove?
Try adding
cursor: autoon your droppable:I have edited your fiddle.
I think cursor style is attached to body for a matter of "layer". I solved the same issue in my page using style on the class applied by JQuery to the currently dragged object:
In this case (in your JSFiddle test case) you can notice that when your drag is hover the droppable element the cursor is the one of the highest z-position element.
Try to change the order of
to
and you see the difference. Or you can use the zIndex property of the .draggable().
If it is appicable to your real case I think it can be a good alternative solution than reset cursor on body element, because it is more specific.
In my case I noticed that while dragging it forces
style="cursor:move"on my parent element. So I forced tostyle="cursor:auto"at the end of drop method (my parent element was<body>):