JQuery拖放/模式使用

我試圖使用可拖動/拖放的方式，允許您拖動和項目，將其放置到位（不排序），然後單擊它以調出編輯模式。當你放下它時，我很難理解你如何編輯項目編輯表（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

我不知道我是否正確理解您的問題，但基本上希望能夠編輯可拖動/可放置的項目。下面是一些代碼，我從你的代碼上面，我勾了一個模式對話框的是表示變形時，在掉落的物品之一點擊：

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>

所以，當你的代碼放到你的樣品，你應該能夠點擊掉落的物品，看到一個模式彈出與在文本框中刪除項目的文本，編輯文本，單擊確定，然後在刪除的項目中查看更新的文本。我點擊了代碼，刪除了刪除項目的代碼。

我發現的唯一問題是改變文字改變了被丟棄物品的高度。不確定這是由於可排序刷新調用還是不在這一點。我會繼續看着它。

我希望這會有所幫助。如果您正在嘗試做其他事情或者您有其他問題，請告訴我。祝你好運！

來源

2010-07-21 16:58:47

這是非常非常接近，我認爲指向正確的方向。非常感謝答覆。與你提供的和我之後的唯一區別在於，我所追求的不會改變按鈕文本，而是在「選擇編輯」下面附加一個新的div與表單。但是，如果我有問題，那就是另一個問題。再次感謝，標記你的答案是正確的，因爲它似乎解決問題1. – JClaspill 2010-07-21 17:26:20

很高興我能幫上忙。你的原型看起來不錯。祝你好運！！ – 2010-07-21 17:29:21

JQuery拖放/模式使用

回答

相關問題