Форум программистов [Powered by Invision Power Board]

Код


<div class="box_storage">
   <div class="item" data-file="" data-id="">

         тут можно текст разместить еще какие не будь элементы ...
    </div>
</div>

<div class="svalka"></div>

Код


$(function(){
   // это клонирует и перетаскивает див, можно указать конкретную часть за какую можно перетаскивать handle
   $(".box_storage .item").draggable({helper: 'clone'});

   // зададим область куда будем помещать переданные элементы.
   $('.svalka').droppable({
       // accept:  функция с горой логикой что разрешаем что нет или селектор класс что разрешено принимать
      /*
     пример из моего проекта 
     accept:function(obj){
                if (obj.is('.component_item')){
                    return true;
                }else if(obj.is('.component_run[data-parent]')){
                    var parent = obj.attr('data-parent');
                    if(parent > 0) return true;
                }
                return false;
            },*/
     // Вызывается всегда как только элемент был отпущен над поверхностью
     drop: function(ev, ui) {
        
         if (ui.draggable.is('.item')){
           // это условие сработает только один раз при перетаскивание и отпускание элемента очень полезно=)
          // создадим див
           var  e = $('<div>' , {
            'class':'item_playlist',     
            'style':'', 
            'data-id': tmp_id,  // tmp ID  
            'new':true   
        });
             $(this).append(e);  // добавили туда куда бросили...

         }}
     });



});