Question

我正在使用jqueryUI处理DnD html5。一切都很完美，只有一个问题。我在输入文本字段上使用日期选择器。如下：

<input type="text"  class="date" name="date" id="date" placeholder="&nbsp;&nbsp;DD-MM-YEAR">

jquery：

$( ".date" ).datepicker();

这是有效的。但是当我拖动它（克隆）并将它放置另一个div然后日历没有显示。请任何人帮助我。

Answer 1

请尝试使用以下代码克隆datePicker。 HTML

 <div id="someDiv">
   <input class="datefield" />
  </div>

SCRIPT

 $(document).ready(function() {
  var mydiv = $('#someDiv');
  mydiv.find('input.datefield').datepicker();
  var newDiv = mydiv.clone(false).attr("id", "someDiv2").insertAfter(mydiv);
  newDiv.find('input.datefield')
    .attr("id", "")
    .removeClass('hasDatepicker')
    .removeData('datepicker')
    .unbind()
    .datepicker();

})

如果有帮助，请及时通知我

Answer 2

这是我的Jquery完整快照：

$(document).ready(function() {
        $( ".date" ).datepicker(); //Data Picker
  $('.test').draggable({
    helper: "clone",
    revert: "invalid"

  });
  $('#drop').droppable({
    accept: ".test",
    drop: function(e, u) {
      var a = u.helper.clone();
        count++;

      console.log("INFO: Accepted: ", a.attr("class"));
      a.css("z-index", 1000);
      a.appendTo("#drop");
      a.attr('class', 'dropped').draggable({
        containment: "#drop"

      }).dblclick(function() {
        // Enabled Resize on element when double clicked
          $(this).resizable(); 

          $(this).find("input.date").removeClass('hasDatepicker').removeData('datepicker').unbind().datepicker();
         $(this).find("textarea").replaceWith(function() {
             return '<span>'+$(this).val()+'</span>';
             $(this).find("input[type=text]").attr("name",count);
         });

      });
    }
  });
  $(document).click(function() {
    if ($(".dropped").length) {
      // Disabled Resize on all elements when #drop
      $(".ui-resizable").resizable("destroy");
    }
  });
});
    function formsubmit(){
        alert(document.getElementById('dd').innerHTML);
    }

Answer 3

有趣的事情发生在这里导致问题，但我确实找到了解决方案。

工作示例：https://jsfiddle.net/Twisty/djecvLdf/3/

HTML代码段

<div class="elements">
  <div class="new button-wrapper element ui-widget-content ui-corner-all" data-item-type="button">
    <span class="side-handle ui-icon ui-icon-grip-dotted-vertical"></span>
    <button class="" title="">New Button</button>
  </div>
  <div class="new textbox-wrapper element ui-widget-content ui-corner-all" data-item-type="input[type='text']">
    <span class="side-handle ui-icon ui-icon-grip-dotted-vertical"></span>
    <input type="text" class="datepicker" title="" placeholder="New DatePicker" />
  </div>
  <div class="new label-wrapper element ui-widget-content ui-corner-all" data-item-type="label">
    <span class="side-handle ui-icon ui-icon-grip-dotted-vertical"></span>
    <label class="" title="">New Label</label>
  </div>
</div>
<div id="drop"></div>

jQuery Snippet 1

在我们的.ready()函数中，我们会查看是否已删除datepicker项：

  $("#drop").on("drop", function() {
    if ($("#drop input.datepicker").length) {
      $("#drop input.datepicker").datepicker();
    }
  });

jQuery Snippet 2

在drop函数内部，我们也会采取这一步骤：

  if (a.find("input.datepicker").length) {
    var datepick = $("#" + a.find("input").attr("id"));
    datepick.datepicker();
  }

这似乎涵盖了所有基础。请查看示例并将其实现到您自己的代码中。

Answer 4

我做错了什么：

$(document).ready(function() {

  $('.test').draggable({
    helper: "clone",
    revert: "invalid"

  });
        $("#drop").on("drop", function() {
    if ($("#drop input.datepicker").length) {
      $("#drop input.datepicker").datepicker();
    }
  })
  $('#drop').droppable({
    accept: ".test",
    drop: function(e, u) {
      var a = u.helper.clone();
        count++;

      console.log("INFO: Accepted: ", a.attr("class"));
      a.css("z-index", 1000);
      a.appendTo("#drop");
      a.attr('class', 'dropped').draggable({
        containment: "#drop"

      }).dblclick(function() {
        // Enabled Resize on element when double clicked
          $(this).resizable(); 

          $(this).find("input.date").removeClass('hasDatepicker').removeData('datepicker').unbind().datepicker();
         $(this).find("textarea").replaceWith(function() {
             return '<span>'+$(this).val()+'</span>';
             $(this).find("input[type=text]").attr("name",count);
         });

      });
    }
  });
  $(document).click(function() {
    if ($(".dropped").length) {
      // Disabled Resize on all elements when #drop
      $(".ui-resizable").resizable("destroy");
    }
  });
});
    function formsubmit(){
        alert(document.getElementById('dd').innerHTML);
    }

拖放日期选择器后没有显示日历

4 个答案: