【问题标题】:How to get value of draggable element in jQuery?如何在 jQuery 中获取可拖动元素的值?
【发布时间】:2017-03-13 16:22:33
【问题描述】:

我正在使用 jQuery 来实现拖放。我想获取可拖动控件的值。

Draggable Control:
------------------

<li>@Html.Label(temp.Label, new { id = "droppable", style = "color:black; width:auto", value = temp.Key })</li>

Function to show draggable control value:
-----------------------------------------

     function initDroppable($elements) 
     {
            $elements.droppable({
                drop: function (event, ui) {
                    var tempid = ui.draggable;
                    var value = tempid.attr("value");
                    alert(value);
                }
            });
      }

尝试了上面的代码,但输出是“未定义”。我尝试了各种似乎不起作用的方法。任何帮助表示赞赏,谢谢!

【问题讨论】:

    标签: asp.net-mvc-4 jquery-ui drag-and-drop draggable droppable


    【解决方案1】:

    除了@Stuart,我们是在寻找input 还是label?像这样:

    var tempid = $(ui.draggable).find("input");
    var value = tempid.val();
    

    我怀疑拖动的项目是这样的:

    <li>
      <label id="droppable" style="color:black; width:auto" value="1">Temp</label>
    </li>
    

    如果您向我们展示生成的 HTML,将会很有帮助。

    另外,为什么不使用data 属性?

    <li>
      <label id="droppable" style="color:black; width:auto" data-temp-key="1">Temp</label>
    </li>
    

    与:

    var value = ui.draggable.data("temp-key");
    

    【讨论】:

      【解决方案2】:

      变化:

      var tempid = ui.draggable;
      

      到:

      var tempid = $(ui.draggable);
      

      然后通过attr方法访问值:

      var value = tempid.attr("value");
      

      【讨论】:

      • 运气不好@stuart,它仍然显示为“未定义”
      • 你试过var tempid = ui.draggable.value;吗?我怀疑我们在整个示例中遗漏了一些东西。被拖动的元素是 input 还是 input 包裹在 li 中?
      • 它被包裹在无序列表中
        • @Html.Label(temp.Label, new { id = "droppable", style = "color:black; width: auto", value = temp.Key })
      • @Chaitanya 请查看我发布的答案。还会要求您将 console.log(ui.draggable) 添加到您的代码中,并提供来自控制台的详细信息或生成的 HTML 示例。
      猜你喜欢
      • 2012-01-31
      • 2010-09-16
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-01-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多