3

我知道这个话题之前已经被问过很多次了，但是我读了很多 stackoverflow 的帖子却搞不清楚。要么我犯了一个愚蠢的错误，要么使用了错误的代码。无论如何，我会欣赏其他眼睛。

我的代码实际上很简单。元素被拖入框中，我希望用户能够关闭拖动的框，以便他们可以重做拖动。

  <div id="questionContainer">

  <div class='row-fluid'>
      <div class='span3 box-content'>
        <div class="box span12">
            <input type="text" placeholder="Column 1" />
        </div>
        <div class="box span12  groupBoxes">
        </div>
      </div>

      <div class='span3 box-content'>
        <div class="box span12">
            <input type="text" placeholder="Column 2" />
        </div>
        <div class="box span12  groupBoxes">
        </div>
      </div>

      <div class='span3 box-content'>
        <div class="box span12">
            <input type="text" placeholder="Column 3" />
        </div>
        <div class="box span12  groupBoxes">
        </div>
      </div>

      <div class='span3 box-content'>
        <div class="box span12">
            <input type="text" placeholder="Column 4" />
        </div>
        <div class="box span12 groupBoxes">
        </div>
      </div>
  </div>

然后是附加拖动元素的javascript。而且我有一个根本不起作用的 .on() 函数。

    $( ".groupBoxes" ).droppable({
      accept: ".sDrag",
      drop: function( event, ui ) {
        var studentID = $(ui.draggable).attr('Uid'); 
        var studentName = $(ui.draggable).find(".sName").text();
        console.log(studentID + ' ' + studentName); 

         var dropbox = "<div class='box questionBox' Uid='"+studentID+"' ><div class='box-content box-statistic'><h3 class='title text-error'>"+studentName+"</h3><div class='icon-remove align-right card-remove' style='font-size:12px'></div></div> </div>";

          $(this).append(dropbox);


      }
    });

$("#questionContainer").on('click', '.card-remove',  function () {
    console.log('hi');
    var student = $(this).parent('.questionBox').attr('Uid'); // get user number
    var box = $(".studentBox[value='"+student+"']")// find the original object through user
    box.removeClass('muted-background').addClass('sDrag');// back in the original object, add class sDrag and remove class muted-background
    // remove the object clicked

});

关于这里出了什么问题的任何想法？

4

1 回答 1

0

尝试在函数外定义保管箱

var dropbox;
    $( ".groupBoxes" ).droppable({
  accept: ".sDrag",
  drop: function( event, ui ) {
    var studentID = $(ui.draggable).attr('Uid'); 
    var studentName = $(ui.draggable).find(".sName").text();
    console.log(studentID + ' ' + studentName); 

      dropbox = "<div class='box questionBox' Uid='"+studentID+"' ><div class='box-content box-statistic'><h3 class='title text-error'>"+studentName+"</h3><div class='icon-remove align-right card-remove' style='font-size:12px'></div></div> </div>";

      $(this).append(dropbox);


  }
});

$("#questionContainer").on('click', '.card-remove',  function () {
    console.log('hi');
    var student = $(this).parent('.questionBox').attr('Uid'); // get user number
    var box = $(".studentBox[value='"+student+"']")// find the original object through user
    box.removeClass('muted-background').addClass('sDrag');// back in the original object, add class sDrag and remove class muted-background
    // remove the object clicked

});
于 2013-09-03T16:26:56.767 回答