Jquery의 드래그 앤 드롭 목록

기본 HTML 및 jQuery를 사용하여이 목록을 만들었습니다. 이것은 더 큰 프로젝트를 테스트하는 것일 뿐이지, 작동하지 않는 것 같습니다.Jquery의 드래그 앤 드롭 목록

.css 페이지, html 페이지 및 .js 페이지가 있으며 모두 함께 작동해야합니다.

여기에 HTML이 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xml:lang="en" lang="en"> 
<head> 
<title>JQuery Drag List Test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="title" content="" /> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<link rel="stylesheet" type="text/css" href="/css/testingcolumns.css"></link> 

</head> 
<body> 

<ul> 
    <li class="item">Coffee</li> 
    <li class="item">Tea</li> 
    <li class="item">Milk</li> 
</ul> 

<div id="list"></div> 


<script type="text/javascript" src="js/jq/dragdrop.js"></script> 
<script type="text/javascript" src="/js/jq/jq-1.7.1.min.js"></script> 
<script type="text/javascript" src="/js/jq/jq-ui-1.8.16.custom.min.js"></script> 

</body> 
</html>

이 JQuery와이다는

$(document).ready(function() { 
    $('li').draggable({ 
     containment: 'document', 
     revert: true, 
     start: function() { 
      contents = $(this).text(); 
     } 
    }); 


    $('#list').droppable({ 
     hoverClass: 'border', 
     accept: '.item', 
     drop: function() { 
      $('#list').append(contents + ' <br /> '); 
     } 
    }); 

});

이이 작동해야 CSS 함께 모든

ul { 
width: 150px; 
padding: 0px; 
list-style: none; 
} 

#list { 

width: 120px; 
height: 180px; 
background-color: #0F9; 
border: 1px solid #000; 
overflow: auto; 
} 

#list.border { 
border-width: 2px; 
}

이지만, 어떤 이유로 나는 브라우저 3에서 미리보기 Dreamweaver를 사용하는 경우 목록 요소가 글 머리 기호로 나타나고 목록 (dreamweaver에서 녹색 상자로 표시됨)이 전혀 표시되지 않습니다. 글 머리 기호가 브라우저에서 드래그되지 않습니다.

출처

2012-12-12 Jack Parker

이것을 JSFiddle에 넣을 수 있습니까? –

JS 피들이란 무엇입니까? –

http://jsfiddle.net/은 HTML, 자바 스크립트 및 CSS 조각을 추가 한 다음 렌더링 방법을 볼 수있는 웹 사이트입니다. 이 상황에서 위에서 모든 부분을 다룰 수 있습니다 (JS 파일의 경로를 전역으로 변경해야 함). 여기에 링크를 붙여 넣으십시오. 이렇게하면 사람들이 자신이 말하는 것을보고 코드를 수정하여 문제를 해결할 수 있는지 확인할 수 있습니다. 훌륭한 도구입니다! –

당신이에서 귀하의 페이지에 JS 파일을 포함하여 순서대로 전환 해보십시오 :

<script type="text/javascript" src="js/jq/dragdrop.js"></script> 
<script type="text/javascript" src="/js/jq/jq-1.7.1.min.js"></script> 
<script type="text/javascript" src="/js/jq/jq-ui-1.8.16.custom.min.js"></script>

<script type="text/javascript" src="/js/jq/jq-1.7.1.min.js"></script> 
<script type="text/javascript" src="/js/jq/jq-ui-1.8.16.custom.min.js"></script> 
<script type="text/javascript" src="js/jq/dragdrop.js"></script>

에 내가있다 dragdrop.js 모르는를하지만 jQuery를 사용하고있는 경우 또는 귀하의 문제 일 수있는 jQuery UI.

출처

2012-12-12 21:36:48

Jquery의 드래그 앤 드롭 목록

답변

관련 문제