첫 번째 끌어서 놓기, 작동하지만 모범 사례입니까?

저는 자바 스크립트를 배우기 시작했으며 jquery draggable을 사용하여 드래그 앤 드롭을 만들었습니다. 첫 번째 끌어서 놓기, 작동하지만 모범 사례입니까?

데모

은 여기에 있습니다 : 난 그냥 JQuery와 사이트에 가서 데모를 적응과 놀았 그래서 튜토리얼을 찾을 수 없습니다

http://www.vwardv.com/doll6.html

. 그것은 작동하지만 실제로 부호화해야하는 방식으로 코딩했는지는 알 수 없습니다. 당신이 향상시킬만한 것을 볼 수 있다면 저에게 말할 수 있다면 정말로 감사 할 것입니다.

<!doctype html> 
<html lang="en"> 
<head> 


<script src="http://code.jquery.com/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script> 


<script> 
$(function() { 
    $("#draggable").draggable() 
}); 
</script> 

<script> 
$(function() { 
    $("#draggable2").draggable(); 
}); 
</script> 

<script> 
$(function() { 
    $("#draggable3").draggable(); 
}); 
</script> 

<script> 
$(function() { 
    $("#draggable4").draggable(); 
}); 
</script> 

<script> 
$(function() { 
    $("#draggable5").draggable(); 
}); 
</script> 


</head> 
</body> 

<div id="bodies/palepd.gif"> 
<img src="bodies/palepd.gif" class="ui-widget-content" id="draggable"> 
<img src="bodies/trousers.gif" class="ui-widget-content" id="draggable2"> 
<img src="bodies/top.gif" class="ui-widget-content" id="draggable3"> 
<img src="bodies/dress.gif" class="ui-widget-content" id="draggable4"> 
<img src="bodies/coat.gif" class="ui-widget-content" id="draggable5"> 
</div>

이

업데이트 *

의 모든 조언을 주셔서 감사합니다, 나는 정말 감사 당신

빅 감사합니다

여기에 코드입니다. 나는 당신의 충고에 따라 코드를 조정했다. 내가 오해했거나 더 나아질 수있는 것이 있다면 알려주세요. 당신

<!doctype html> 
<html lang="en"> 
<head> 


<script src="http://code.jquery.com/jquery.min.js"></script> 
<script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script> 


<script> 
$(document).ready(function() { 
    $(".mydraggable").draggable(); 
}); 
</script> 


</head> 
<body> 

<div id="items"> 
<img src="bodies/palepd.gif" class="mydraggable"> 
<img src="bodies/trousers.gif" class="mydraggable"> 
<img src="bodies/top.gif" class="mydraggable"> 
<img src="bodies/dress.gif" class="mydraggable"> 
<img src="bodies/coat.gif" class="mydraggable"> 
</div> 


</body>

* 갱신이

사람이 말해 줄 수 왜해야 우리 '의 UI 위젯 콘텐츠'대신 'mydraggble'감사?

는 지금은 예를 들어, 재킷 뒤에 정상을 넣을 수 있도록 항목을 주문하는 다음 단계로 이동해야하는 등

내가 페이지에 두 개의 버튼을 추가해야합니다 : 하나 항목을 레이어/레이어 위로 이동하고 레이어/레이어 아래로 항목을 이동합니다. 이것은 명확하게하기 위해 어떤 항목이 선택되었는지 나타내는 몇 가지 방법을 만들 필요가 있다는 것을 의미합니다. 누구든지이 두 가지 모두에 대해 올바른 방향으로 나를 가리킬 수 있습니까?

다시 한번 감사

출처

2011-12-28 vward

가장 큰 문제는 그녀의 바지는 전혀 맞지 않는 것이 분명하다. 확실히 가장 큰;) – Interrobang

는 하나 그 5 개 별도의 스크립트 블록을 교체하는 것이 더 있을까 : 더 나은

<script> 
$(document).ready(function() { 
    $("#draggable, #draggable2, #draggable3, #draggable4, #draggable5").draggable() 
}); 
</script>

이 페이지 그들에있는 모든 드래그 할 수있는 요소에 클래스의 mydraggable '를 제공하는 것 로 위의 대체 :

<script> 
    $(document).ready(function() { 
     $(".mydraggable").draggable() 
    }); 
</script>

출처

2011-12-28 11:09:29 techfoobar

고마워요! 그것이 바로 제가 알고 싶었던 것입니다. 나는 그런 것이 있어야한다고 생각했습니다. 코드와 작동 방식을 변경했는데 의도 한 바가 무엇입니까? – vward

을 난 당신이 단순히 하나의 jQuery 셀렉터의 모든 개체를 호출 할 수 있습니다 생각 :

를

$('.ui-widget-content').draggable();

출처

2011-12-28 11:10:27

대부분 미세 :

</body> 마지막에와 </html>을 닫습니다 <body>하고 있습니다.

<div id="bodies/palepd.gif">

유효하지 않은 ID입니다.

는 하나의 블록으로 모든 인라인 스크립트 블록을 결합 :

$(function() { 
    $("#draggable1, #draggable2, #draggable3, #draggable4, #draggable5").draggable(); 
});

출처

2011-12-28 11:11:08 Interrobang

나를 밖으로 도약 제일 먼저 당신이 준비 이벤트 핸들러의 수입니다. $(function() { ...의 각 인스턴스는 DOM을 조작 할 준비가되었을 때 실행되는 준비 이벤트 핸들러입니다.

하나가 충분할 때 많은이 할 필요가 없습니다 :

$(function() { 
    $("#draggable").draggable() 
    $("#draggable2").draggable(); 
    $("#draggable3").draggable(); 
    $("#draggable4").draggable(); 
});

다음 문제는 함수 본문의 첫 번째 줄에 누락 된 세미콜론입니다. 중요한 문제는 아니지만 항상 줄 끝 부분에 세미콜론을 포함하는 것이 좋습니다. 나중에 혼란스런 문제에 봉착 할 가능성이 있습니다.

다음으로,이 4 줄을 하나의 짧은 줄로 바꿀 수 있습니다. 4 개 요소는 일반적인 클래스를 공유, 당신은 그들 모두 일치하는 클래스 선택기를 사용할 수 있습니다

$(function() { 
    $(".ui-widget-content").draggable(); 
});

또한, 당신은 <body> 요소를 열 수 없습니다 만 닫습니다. </body>을 <body>으로 변경하고 끝에 닫습니다.

마지막으로 <script> 요소에 src 특성이없는 경우 type 특성이 있어야합니다. 해당 <script> 요소 내에 JavaScript 코드를 작성하면 type이 text/javascript이어야합니다. 다른 HTML 유효성 문제는 요소에 <title> 요소가없고 누락 된 alt 특성입니다.

그래서 모두 모두,이에 코드를 변경합니다 :

<!doctype html> 
<html lang="en"> 
<head> 
    <title>Some title</title> 
    <script src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://code.jquery.com/ui/1.8.17/jquery-ui.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $(".ui-widget-content").draggable(); 
     }); 
    </script> 
</head> 
<body> 
    <div id="bodies/palepd.gif"> 
     <img src="bodies/palepd.gif" class="ui-widget-content"> 
     <img src="bodies/trousers.gif" class="ui-widget-content"> 
     <img src="bodies/top.gif" class="ui-widget-content"> 
     <img src="bodies/dress.gif" class="ui-widget-content"> 
     <img src="bodies/coat.gif" class="ui-widget-content"> 
    </div> 
</body> 
</html>

출처

2011-12-28 11:12:59

'type' 속성에 관해서 : 나는 그것을 당신이 어떤 경우에 포함시켜야한다고 생각하지 않습니다. [사양] (http://www.w3.org/TR/html5/scripting-1.html#the-script-element)은 다음과 같이 말합니다 : * "속성이없는 경우 사용되는 기본값은" text/javascript "'. * 이것은'src' 속성과는 독립적입니다. –

네, 맞습니다. 다음의 스펙 라인은 더 명확하게 설명합니다 : * 언어가 "text/javascript"로 기술되지 않으면, type 속성이 존재해야합니다 *. 매일 새로운 것을 배웁니다. –

고맙습니다. 매우 도움이되었고 정말 고맙습니다. – vward

첫 번째 끌어서 놓기, 작동하지만 모범 사례입니까?

답변

관련 문제