function dragTo(eles, _target){ var id =''; var words = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']; var target_is_leave = false; eles.each(function(i){ id = $(this).attr('id'); if(!id){ id = 'drag'+words[Math.floor(Math.random()*26)] + words[Math.floor(Math.random()*26)] + words[Math.floor(Math.random()*26)] + i; $(this).attr('id', id); } $(this).attr('draggable','true'); this.ondragstart = function(ev){ ev.dataTransfer.setData("targetid",ev.target.id); }; }); _target.get(0).ondrop = function(ev){ var targetid = ev.dataTransfer.getData("targetid"); var t_clone = $('#'+targetid).clone(); t_clone.removeAttr('id').addClass('t_clone'); _target.append(t_clone); ev.preventDefault(); ev.stopPropagation(); }; _target.get(0).ondragover = function(ev){ ev.preventDefault(); ev.stopPropagation(); }; _target.get(0).ondragenter = function(ev){ target_is_leave = false; }; _target.get(0).ondragleave = function(ev){ target_is_leave = true; }; $('body').get(0).ondragend = function(ev){ if($(ev.target).hasClass('t_clone') && target_is_leave==true){ $(ev.target).remove(); } }; } /*$(document).ready(function(){ dragTo($('.aa'), $('#div1')); });*/