1. 홈
  2. 질의 응답
  3. JQuery 드래그/드롭/모달 사용

JQuery 드래그/드롭/모달 사용

2010-07-21 3 views
1

draggable/droppable을 드래그하여 항목을 드래그하고 정렬하지 않고 제 위치에 놓은 다음 클릭하여 편집 모달을 불러올 수 있습니다. . 일단 당신이 그것을 드롭하면 편집 할 수있는 항목 (sp?)을 만드는 방법에 난처한 상황이되고 있습니다.JQuery 드래그/드롭/모달 사용

현재 제 코드는 jquery draggable/droppable 데모와 거의 같습니다. 하지만 어쨌든 여기에 있습니다.

이것은 매우 초기 프로토 타입이며, 작업 할 때 도움이되므로 명심하십시오. 초기 피드백은 컨셉에 중점을두고 있으며, 솔루션을 다른 곳에서 찾으려고 더 이상 시간을 낭비 할 수 없습니다. 사전 안내에 감사드립니다.

<head> 
    <title>CTB Prototype</title> 
    <link href="css/redmond/jquery-ui-1.8.1.custom.css" rel="stylesheet" type="text/css"/> 
    <script type="text/javascript" language="javascript" src="http://nt-websql/scheduler/js/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" language="javascript" src="http://nt-websql/scheduler/js/jquery-ui-1.8.1.custom.min.js"></script> 
    <style type="text/css"> 
     body{ 
      margin: 0; 
      padding: 0; 
      font-family: Arial, Helvetica, sans-serif; 
      font-size: 12px; 
     } 
     h1, h2, h3 { 
      margin: 0; 
      padding: 0; 
      font-weight: normal; 
     } 
     h1 { 
      font-size: 2em; 
     } 

     h2 { 
      font-size: 1.8em; 
     } 

     h3 { 
      font-size: 1.6em; 
      padding-bottom:0px; 
      margin-bottom:0px; 
     } 
     .ignore { 
      margin-top: 0px; 
      padding-top: 0px; 
      padding-bottom:0px; 
      margin-bottom:0px; 
     } 
     p, ul, ol { 
      margin-top: 0px; 
      padding-top: 0px; 
      margin-bottom: 0px; 
      padding-bottom: 0px; 
      line-height: 180%; 
     } 
     div #wrapper { 
      margin: 0 auto; 
      padding: 0; 
     } 
     div #left{float:left;width:300px;} 
      div #categories{} 
      #categories button{} 
     div #right{float:left;width:699px;} 
      div #top{} 
      div #bottom{} 


     #selectionEdit { 
      padding:1em 1.5em 1em 1.5em; 
     } 
     h1 { 
      padding: .15em; 
      margin: 0; 
     } 
     #products { 
      float:left; 
      width: 250px; 
      margin-right: 2em; 
     } 
     #cart { 
      width: 700px; 
      float: left; 
     } 
     /* style the list to maximize the droppable hitarea */ 
     #cart ol { 
      margin: 0; 
      padding: 1em 0 1em 3em; 
     } 
     #selectionEdit p{ 
      margin-top:5px; 
     } 
     ul{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;} 
    </style> 
    <script type="text/javascript" language="javascript"> 
     function detailRemoveButton() { 
      $("#cart ol > li").button({ 
       icons: { 
        primary: 'ui-icon-stop' 
       }, 
       text: true 
      }).click(function() { 
       $(this).remove(); 
       $("#cart ol").sortable('refresh'); 
      }); 
     } 

     $(function() { 
      $("#catalog").accordion(); 
      $("#catalog li").draggable({ 
       appendTo: "body", 
       helper: "clone" 
      }); 

      $("#cart ol").droppable({ 
       activeClass: "ui-state-default", 
       hoverClass: "ui-state-hover", 
       accept: ":not(.ui-sortable-helper)", 
       drop: function (event, ui) { 
        $(this).find(".placeholder").remove(); 
        $("<li></li>").text(ui.draggable.text()).appendTo(this); 
        detailRemoveButton(); 
       } 
      }).sortable({ 
       items: "li:not(.placeholder)", 
       sort: function() { 
        $(this).removeClass("ui-state-default"); 
       } 
      }); 

     }); 
    </script> 
</head> 
<body> 
<!--<div id="wrapper"> 
    <div id="left" runat="server"> 
     <div id="categories" runat="server"> 
      <div id="draggable">Drag me</div> 
     </div> 
    </div> 
    <div id="right" runat="server"> 
     <div id="top" runat="server"> 
     <input type="text" /> 
     </div> 
     <div id="bottom" runat="server"> 
      <div id="droppable" class="ui-widget-header"> 
       <P>Drop here</P> 
      </div> 
     </div> 
    </div> 
</div>--> 

<div id="products"> 
    <h1 class="ui-widget-header">Call Flow</h1> 
    <div id="catalog"> 
     <h3><a href="#">Agencies</a></h3> 
     <div class="ignore"> 
      <ul> 
       <li class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon"><span class="ui-button-icon-primary ui-icon ui-icon-stop"></span><span class="ui-button-text">Agency-X</span></li> 
       <li class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon"><span class="ui-button-icon-primary ui-icon ui-icon-stop"></span><span class="ui-button-text">Everest</span></li> 
       <li class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon"><span class="ui-button-icon-primary ui-icon ui-icon-stop"></span><span class="ui-button-text">Big I Markets</span></li> 
      </ul> 
     </div> 
     <h3><a href="#">Actions</a></h3> 
     <div> 
      <ul> 
       <li class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon"><span class="ui-button-icon-primary ui-icon ui-icon-stop"></span><span class="ui-button-text">Quote</span></li> 
       <li class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon"><span class="ui-button-icon-primary ui-icon ui-icon-stop"></span><span class="ui-button-text">Referral</span></li> 
       <li class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon"><span class="ui-button-icon-primary ui-icon ui-icon-stop"></span><span class="ui-button-text">FNOL</span></li> 
      </ul> 
     </div> 
     <h3><a href="#">Forms</a></h3> 
     <div> 
      <ul> 
       <li class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon"><span class="ui-button-icon-primary ui-icon ui-icon-stop"></span><span class="ui-button-text">Everest AutoFNOL</span></li> 
       <li class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon"><span class="ui-button-icon-primary ui-icon ui-icon-stop"></span><span class="ui-button-text">BIM</span></li> 
      </ul> 
     </div> 
    </div> 
</div> 


<div id="cart"> 
    <h1 class="ui-widget-header">Current Call Details</h1> 
    <div class="ui-widget-content"> 
     <ol> 
      <li class="placeholder">Drag call flow items here</li> 
     </ol> 
    </div> 
    <div style="margin-top:10px;"> 
     <h1 class="ui-widget-header">Selection Edit</h1> 
     <div class="ui-widget-content" id="selectionEdit"> 
<form> 
      <fieldset> 
       <legend>Name Information</legend> 
       <label for="nameFirst">First Name:</label> 
       <input type="text" id="nameFirst" /> 
       <label for="nameMiddle">MI:</label> 
       <input type="text" id="nameMiddle" maxlength="4" style="width:30px;text-align:center;" /> 
       <label for="nameLast">Last Name:</label> 
       <input type="text" id="nameLast" /> 
       <label for="nameSuffix">Suffix:</label> 
       <select id="nameSuffix"> 
        <option>Jr.</option> 
        <option>Sr.</option> 
       </select> 
      </fieldset> 
      <div style="width:501px;display:block"> 
      <fieldset style="width:250px;display:block"> 
       <legend>Contact Information</legend> 
       <label for="phoneNumber">Phone Number:</label><br /> 
       <input type="text" id="phoneNumber" /><br /> 
       <label for="phoneNumberAlt">Alternate Phone Number:</label><br /> 
       <input type="text" id="phoneNumberAlt" /><br /> 
       <label for="emailAddress">Email Address:</label><br /> 
       <input type="text" id="emailAddress" /> 
      </fieldset> 
      <fieldset style="width:250px;display:block"> 
       <legend>Address Information</legend> 
       <label for="addressNumber">Line 1:</label><br /> 
       <input type="text" id="addressLing1" /><br /> 
       <label for="addressStreet">Line 2:</label><br /> 
       <input type="text" id="addressLine2" /><br /> 
       <label for="addressCity">City:</label><br /><input type="text" id="addressCity" /><br /> 
       <label for="addressState">State:</label><input type="text" style="width:25px;margin-right:10px;" id="addressState" maxlength="2" /><label for="addressZip">Zip:</label><input type="text" style="width:40px;" id="addressZip" maxlength="5" /> 
      </fieldset> 
      </div> 
      </form> 
     </div> 
    </div> 
</div>

나는 내가 도울 수있는만큼 많은 코드를 제공했다.

출처

2010-07-21 JClaspill

답변

1

질문을 올바르게 이해하고 있는지 확실하지 않지만 기본적으로 draggable/droppable 항목을 편집 할 수 있기를 원합니다.

function detailRemoveButton() { 
    $("#cart ol > li").button({ 
     icons: { 
      primary: 'ui-icon-stop' 
     }, 
     text: true 
    }).click(function() { 
     $('#txtName').val($(this).text()); //set the dialog's text box to the clicked item's text 
     var item = $(this); //grab on to this as we'll reference it in the dialog (closure) 
     $('#dialog').dialog({ //open up the dialog 
      autoOpen: true, 
      modal: true, 
      title: 'Edit Droppable Text', 
      buttons: { 
       'Save' : function() { //update the dropped text when we click Save 
        item.text($('#txtName').val()); 
        $(this).dialog('close'); 
       } 
      } 
     }); 
     //$(this).remove(); //commented this out 
     $("#cart ol").sortable('refresh'); 
    }); 
}

나는 당신의 HTML 마크 업에 만든 유일한 변경되었다 : 여기 때 삭제 된 항목 중 하나를 클릭 내가 모달 대화 상자의 전시를 연결하는 위 코드에서 수정 된 코드의 비트입니다 디스플레이 '없음'으로 설정 대화 자리의 추가 : 당신이 당신의 샘플이 코드를 배치 할 때

<div id='dialog' style='display:none;'> 
    <label for='txtName'>Text:</label><input type='input' id='txtName' /> 
</div>

그래서, 당신은 삭제 된 항목을 클릭 할 수 있어야한다는 모달 팝업 참조 텍스트 상자에 항목의 텍스트를 놓고 텍스트를 편집 한 다음 확인을 클릭하고 삭제 된 항목에서 업데이트 된 텍스트를 봅니다. 드롭 된 항목을 클릭 할 때이를 제거하는 코드를 주석 처리했습니다.

내가 발견 한 유일한 문제는 텍스트를 변경하면 삭제 된 항목의 높이가 변경된다는 것입니다. 이 시점에서 sortable-refresh 호출로 인한 것인지 확실하지 않습니다. 나는 그것을 계속 살펴볼 것이다.

이 정보가 도움이되기를 바랍니다. 다른 일을하려고하거나 다른 질문이있는 경우 알려주십시오. 행운을 빕니다!

출처

2010-07-21 16:58:47

+0

이것은 매우 가까이에 있으며 올바른 방향으로 나를 가리킨다 고 생각합니다. 답장을 보내 주셔서 감사합니다. 당신이 제공 한 것과 내가 뭘했는지에 대한 유일한 차이점은, 필자가 한 일은 버튼 텍스트를 변경하지 않고 양식으로 '선택 편집'아래에 새로운 div를 추가한다는 것입니다. 하지만 나중에 문제가 생기는 경우 다른 질문이 있습니다. 문제를 해결하는 것으로 보이는 대답을 정확하게 표시해 주셔서 감사합니다. – JClaspill

+0

기꺼이 도와 드리겠습니다. 프로토 타입이 좋아 보인다. 행운을 빕니다!! –

관련 문제

 관련 문제