2014-05-22 2 views
0

내 페이지에 버튼이 있습니다. 그것을 클릭하면 상자가 페이지의 영역에 추가됩니다. 이 상자는 드래그 가능하고 크기를 조정할 수 있도록 만들어졌습니다. 모든 것이 작동합니다. 그런 다음 내 html 페이지를 내 컴퓨터에 저장합니다. 저장된 파일을 엽니 다. 그러나 이제 상자는 여전히 드래그 가능하지만 IT가 더 길지 않습니다. 그것이 문제이다. 왜 그런 일이 일어날까요? 어떻게 수정해야합니까?html 파일을 저장 한 후 jqueryUI 크기 조정이 작동하지 않습니다.

jsfiddle을 제공 하겠지만 문제를 복제 할 수 없으므로 (웹 파일 저장 포함) 방금 아래 코드를 게시했습니다.

HTML :

<body> 
    <button id="add">ADD</button> 
    <div id="area"></div> 
</body> 

CSS :

#area { 
    width: 1000px; 
    height: 500px; 
    border: 1px solid black; 
} 

.box { 
    position: relative; 
    float: left; 
    border: 2px solid green; 
    width: 100px; 
    height: 100px; 
} 

자바 스크립트/jQuery를/jQueryUI : 처음에는

$(document).ready(function(){ 

    $('.box').draggable().resizable(); 

    $('#add').click(function(){ 
     var box = $('<div />') 
      .addClass('box') 
      .draggable() 
      .resizable(); 
     box.appendTo($('#area')); 
    }); 

}); 

,()는 크기 조정은 바인더 제본 된 상자 때 상자가 영역에 추가되었지만 일단 페이지가 저장되면 요소는 모든 바인딩을 잃어 버리는 것처럼 보입니다. 그래서 나는 준비 할 때 드래그 가능하고 크기 조정이 가능한 첫 번째 행을 바인딩하는 첫 번째 줄 (JS에서)을 던졌습니다. 이렇게하면 저장된 파일을 다시 연 후에도 드래그 할 수있게되며 크기를 조정할 수도 있지만 그렇지 않습니다.

여기 내 문제가 분명히 설명되기를 바랍니다. 도움을 주셔서 감사합니다. Chrome을 사용하고 있습니다. 나는 jquery 1.10.2와 jquery 2.0.0을 시도했다. jquery-ui-1.10.3 및 jquery-ui 1.10.4도 부드러움 테마로 시도했습니다.

+0

문제를 해결할 수 있으면 설명에 답이 들어가야하며 다른 사람에게 도움을 요청하면 답을 쉽게 찾을 수 있습니다. – workabyte

+0

@workabyte 좋은 지적입니다. – Partik

답변

1

스크립트 (첫 번째 줄)에 한 줄을 추가하여 이제는 작동하게했습니다. 아래 코드를 참조하십시오.

$(document).ready(function(){ 

    $('.box').empty().removeClass('ui-resizable ui-draggable'); 
    $('.box').draggable().resizable(); 

    $('#add').click(function(){ 
     var box = $('<div />') 
       .addClass('box') 
       .draggable() 
       .resizable(); 
     box.appendTo($('#area')); 
    }); 

}); 

사실 크기 조정 가능하고 드래그 가능한 효과를 재설정하고 있습니다. 크기를 조정할 수있는 항목을 만들면 옆에 여러 개의 div가 생성 된 다음 div의 모든 항목이 래핑됩니다. 이 경우에는 selector가 이미 div 대신 wrapping 대신 div로 묶여 IT ('.box')에 추가되었습니다. 내가 쓴 줄은 그것을 취소하고 다시한다.

"재설정"하려면 모든 ".box"를 비우고 클래스를 제거하십시오. 그런 다음 다시 크기 조정 및 드래그 할 수있게합니다.

이전에 draggable이 작동 한 이유는 요소에 "ui-draggable"클래스가 있는지 여부와 관련된 문제 였기 때문입니다. 반면 크기 재조정은 다른 요소를 혼합에 추가합니다. 페이지가 저장되면 해당 요소와 해당 클래스가 유지됩니다. 이제 다시로드 될 때 클래스를 다시 추가하려고 시도하지만 필요가 없다는 것을 알기 때문에 그렇게하지 않습니다. (draggable 괜찮아요). 하지만 크기 조정이 가능하면 요소가 이미 있다는 사실에 관계없이 요소를 다시 추가합니다. 이 두배로하면 크기를 조정할 수있는 가능성이 있습니다.

관련 문제