JQuery UI - Пропускаемый блок внутри обертываемого предмета - PullRequest
Новая
       7

JQuery UI - Пропускаемый блок внутри обертываемого предмета

3 голосов
/ 11 ноября 2011

Я действительно застрял.Я хочу иметь возможность перетаскивать блок пользовательского интерфейса jQuery в раскрывающийся элемент div внутри обертываемого объекта.

Мне нужно получить идентификатор div, куда сбрасывается блок.

js: 

$( ".wrapper" ).droppable({

            drop: function( event, ui ) {
                alert('dropped in the wrapper');
            }

        });
$( ".inside" ).droppable({

            drop: function( event, ui ) {
                alert('dropped inside');
            }

        });
$( ".outSide" ).droppable({

            drop: function( event, ui ) {
                alert('dropped OutSide');
            }

        });
$( ".block" ).draggable();

CSS: 

.wrapper {
    width:200px;
    height:250px;
    background-color:#0f0;
    text-align:center;
    line-height:200px;
    vertical-align:middle;
}

.inside {
    display:inline-block;
    vertical-align:middle;
    width:100px;
    height:110px;
    border:1px solid #000;

}
.outSide {
    display:inline-block;
    width:100px;
    height:200px;
    position:relative; 
    float:left;
    left:240px;
    top:40px;
    border:1px solid #000;

}

.block {
    width:80px;
    height:30px;
    background-color:#00f;
    display:inline-block;
}

HTML: 

<div class="wrapper">
    Wrapper
    <div class="inside">
        Inside
    </div>
</div>
       <div class="outSide">
       Outside
    </div>
<br /><br />

        <div class="block"></div>

<br /><br />

JSFiddle: http://jsfiddle.net/J7azG/23/

1 Ответ

0 голосов
/ 02 мая 2015

Вам нужно активировать общие функции для всех div.например: 

  $( ".wrapper" ).droppable({
            drop: handleDrop
        });
$( ".inside" ).droppable({

            drop: handleDrop

        });
$( ".outSide" ).droppable({

            drop:handleDrop

        });
$( ".block" ).draggable();

function handleDrop(event,ui)
{
  switch $(this).attr("id"){
  case "...":   break;
  case "....":  break;
  default: break;
}


}
...