드래그 앤 드롭 된 요소를 드래그 가능하면서 드롭 가능하게 만들기

Lixi

다음과 같이 기능을 얻으려고 노력했습니다.

-여러 450x150을 .drop_cont에 끌어다 놓을 수 있습니다.

-그런 다음 300x150을 450x150으로 드래그 앤 드롭 할 수 있습니다.

클래스 추가 및 제거를 시도했지만 작동하지 않는 것 같습니다. 그렇게 할 수있는 방법이 있습니까? 아마도 제가 생각하지 못한 방법이있을 것입니다.

데모 : jsFiddle

샘플 코드 :

$(document).ready(function () {
$( ".idg_row" ).draggable({
    helper: "clone",
    appendTo: "body",
    containment:"document",
    revert: true,
    stop: function( event, ui ) {
        check();
    }
});
$( ".idg_column" ).draggable({
    helper: "clone",
    appendTo: "body",
    containment:"document",
    revert: true,
    stop: function( event, ui ) {
        check();
    }
});
$( ".drop_cont" ).droppable({
    accept: ".idg_row",
    drop: function (event, ui) {
        ui.draggable.clone().appendTo($(this)).draggable();
    }
});
$( ".droppableC" ).droppable();
});

function check() {
  $('.drop_cont .idg_row').addClass('droppableC');
  $('.drop_cont .idg_column').addClass('droppableC');
}
딜런 와트

클래스를 추가 한 후에는 새 요소에서 실행하기 위해 droppable을 리콜해야합니다.

function check() {
  $('.drop_cont .idg_row').addClass('droppableC');
  $('.drop_cont .idg_column').addClass('droppableC');
  $('.droppableC:not(.ui-droppable)' ).droppable();
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

드래그 된 요소에서 parrent 데이터 요소 가져 오기-드래그 앤 드롭 기능

분류에서Dev

JavaScript로 드래그 앤 드롭 기능

분류에서Dev

PhoneGap의 드래그 앤 드롭 기능?

분류에서Dev

JFreeChart의 드래그 앤 드롭 기능

분류에서Dev

jquery를 사용하여 jsp의 드래그 앤 드롭 기능

분류에서Dev

jquery를 사용하여 jsp의 드래그 앤 드롭 기능

분류에서Dev

jquery 드래그 앤 드롭, 일반 드롭 대신 드롭 된 클론 가져 오기

분류에서Dev

jQuery 드래그 앤 드롭으로 요소를 교체하고 드롭 가능한 동적 생성

분류에서Dev

요소를 드롭하는 방법 / 칸반 종류의 드래그 앤 드롭 / 초기 위치로

분류에서Dev

드래그 앤 드롭 ImageButton 만들기

분류에서Dev

드래그 앤 드롭하여 순서를 변경하세요.

분류에서Dev

동적 요소가있는 jQuery 드래그 앤 드롭

분류에서Dev

드래그 앤 드롭은 어떻게하나요?

분류에서Dev

자바 스크립트 드래그 앤 드롭 기능 문제

분류에서Dev

드래그 앤 드롭 기능이있는 jQuery 팝 오버

분류에서Dev

ADF 캘린더의 드래그 앤 드롭 기능

분류에서Dev

드래그 앤 드롭 기능 신속한 OSX

분류에서Dev

드래그 앤 드롭 후 div 크기가 증가합니다.

분류에서Dev

드래그 앤 드롭 위치 가져 오기

분류에서Dev

상대적으로 배치 된 요소가있는 각도 파일 업로드 드래그 앤 드롭

분류에서Dev

야간 시계를 사용하여 드래그 앤 드롭

분류에서Dev

AngularJS를 사용하여 div 드래그 앤 드롭

분류에서Dev

jquery를 사용하여 이미지 드래그 앤 드롭

분류에서Dev

jQuery를 사용하여 드래그 앤 드롭 스왑

분류에서Dev

드래그 가능 / 드롭 가능 : 드롭 이벤트의 드래그 가능 요소에서 업데이트 된 데이터를 읽을 수 없음-*

분류에서Dev

드래그 앤 드롭 드롭 가능한 여러 이미지의 ID 가져 오기

분류에서Dev

Android-드래그 앤 드롭을 수행하는 동안 터치 된 요소 감지

분류에서Dev

Flutter 정렬 가능한 드래그 앤 드롭 ListView

분류에서Dev

Silverstripe ModelAdmin 드래그 앤 드롭 정렬 가능

Related 관련 기사

  1. 1

    드래그 된 요소에서 parrent 데이터 요소 가져 오기-드래그 앤 드롭 기능

  2. 2

    JavaScript로 드래그 앤 드롭 기능

  3. 3

    PhoneGap의 드래그 앤 드롭 기능?

  4. 4

    JFreeChart의 드래그 앤 드롭 기능

  5. 5

    jquery를 사용하여 jsp의 드래그 앤 드롭 기능

  6. 6

    jquery를 사용하여 jsp의 드래그 앤 드롭 기능

  7. 7

    jquery 드래그 앤 드롭, 일반 드롭 대신 드롭 된 클론 가져 오기

  8. 8

    jQuery 드래그 앤 드롭으로 요소를 교체하고 드롭 가능한 동적 생성

  9. 9

    요소를 드롭하는 방법 / 칸반 종류의 드래그 앤 드롭 / 초기 위치로

  10. 10

    드래그 앤 드롭 ImageButton 만들기

  11. 11

    드래그 앤 드롭하여 순서를 변경하세요.

  12. 12

    동적 요소가있는 jQuery 드래그 앤 드롭

  13. 13

    드래그 앤 드롭은 어떻게하나요?

  14. 14

    자바 스크립트 드래그 앤 드롭 기능 문제

  15. 15

    드래그 앤 드롭 기능이있는 jQuery 팝 오버

  16. 16

    ADF 캘린더의 드래그 앤 드롭 기능

  17. 17

    드래그 앤 드롭 기능 신속한 OSX

  18. 18

    드래그 앤 드롭 후 div 크기가 증가합니다.

  19. 19

    드래그 앤 드롭 위치 가져 오기

  20. 20

    상대적으로 배치 된 요소가있는 각도 파일 업로드 드래그 앤 드롭

  21. 21

    야간 시계를 사용하여 드래그 앤 드롭

  22. 22

    AngularJS를 사용하여 div 드래그 앤 드롭

  23. 23

    jquery를 사용하여 이미지 드래그 앤 드롭

  24. 24

    jQuery를 사용하여 드래그 앤 드롭 스왑

  25. 25

    드래그 가능 / 드롭 가능 : 드롭 이벤트의 드래그 가능 요소에서 업데이트 된 데이터를 읽을 수 없음-*

  26. 26

    드래그 앤 드롭 드롭 가능한 여러 이미지의 ID 가져 오기

  27. 27

    Android-드래그 앤 드롭을 수행하는 동안 터치 된 요소 감지

  28. 28

    Flutter 정렬 가능한 드래그 앤 드롭 ListView

  29. 29

    Silverstripe ModelAdmin 드래그 앤 드롭 정렬 가능

뜨겁다태그

보관