2013-05-08 7 views
1

에 드래그에 클릭 가능한 지역을 설정 이것은 내가 JQuery와 드래그 앤 드롭을 사용하고 있습니다 Jquery drag and drop - click event registers on dropJQuery와 드래그 앤 드롭 - 드롭

에 게시 후속 질문입니다. 드래그 할 수있는 요소에는 왼쪽과 오른쪽으로 떠있는 두 개의 중첩 div가 들어 있습니다. 왼쪽 div는 draggable에 텍스트를 포함하고 오른쪽 div는 툴팁을 토글하는 작은 'info'버튼을 포함합니다.

드롭 할 때 드래그 가능 텍스트가 포함 된 왼쪽 중첩 div를 클릭 할 수있게하려고합니다. 드롭은 다음 함수에 의해 처리됩니다

function handleElementDrop(event, ui) { 
    var slotNumber = $(this).data('number'); 
    var elementNumber = ui.draggable.data('number'); 

    if (slotNumber == elementNumber) { 



ui.draggable.css('cursor', 'pointer'); 
ui.draggable.parent().find('.element_left').click(function(e) { 
     window.open(ui.draggable.attr('data-link')); 
    }); 

ui.draggable.parent().find('.info').addClass('correct'); 
    ui.draggable.addClass('correct'); 
    ui.draggable.draggable('disable'); 
    $(this).droppable('disable'); 
    ui.draggable.position({ of: $(this), my: 'left top', at: 'left top' }); 
    ui.draggable.draggable('option', 'revert', false); 
    } 
} 

지금있는 곳 :

ui.draggable.parent().find('.element_left').click(function(e) { 
     window.open(ui.draggable.attr('data-link')); 
    }); 

클릭 가능한 왼쪽 중첩 된 DIV 확인을위한 작품,하지만 난 내 마지막 질문에 게시 문제가 남아 나타납니다 . 즉, 드롭하면 click 이벤트가 발생합니다. .element_left 요소는 그 내부에 info 요소이며 이것은 내가 http://jsfiddle.net/5wcaQ/

답변

1

i에서 바이올린을 가지고 ... 매우 산발적으로 발생하지 않습니다.

또한이 동작은 다른 클릭 이벤트 처리기 내에 클릭 이벤트 핸들러를 등록한다는 사실과 관련 될 수 있습니다. setTimout에 이벤트 등록을 넣어 시도하고

setTimeout(function(){ 
    ui.draggable.find('.element_left').click(function(e) { 
     window.open(ui.draggable.attr('data-link')); 
    }); 
}); 

데모를 고정지고 있는지 여부를 확인 : Fiddle

+0

없음 ... element_right div의 클래스 정보와 앵커 태그가 포함되어 있습니다. 그것은 요소에 대한 데이터 링크를 여는 것이 아니라 툴팁을 표시하는 데에만 사용되는 정보 버튼입니다. element_left를 클릭하면됩니다. – IlludiumPu36

+0

@PeterBrowne 업데이트 확인 –

+0

그래, 나는 ui.draggable.find ('element_left')를 시도했다. (function (e) {또한 가끔씩 클릭 이벤트가 발생한다. 3 슬롯 그리고 마지막 슬롯 그리고 이벤트는 마지막 슬롯에서 발사되었습니다 ... – IlludiumPu36