我想创建一个可拖动的字母使用jQuery，用户可以拖动然后放入html输入元素

Question

我试过this建议，但字母不能被拖动。

请看这个图像的预期效果。

<div class="word"> 
<div>s</div> 
<div>t</div> 
<div>a</div> 
<div>c</div> 
<div>k</div> 
<div>o</div> 
<div>v</div> 
<div>e</div> 
<div>r</div> 
<div>f</div> 
<div>l</div> 
<div>o</div> 
<div>w</div> 
</div> 

<script type="text/javascript"> 
$(function() { 
    $(".word").draggable(); 
}); 
</script> 

所需的效果

Answer 1

采取一些猜测这里。以下是我放在一起：

1. 每个字母应该是拖动
2. 一旦字母已被使用，不能重复使用
3. 输入的字段不应该允许用户输入，但只在该字段拖到了一封信
4. 用户可以只清除整个领域（所有字母中没有顺序返回）

HTML

<div class="word"> 
    <div class="letter">s</div> 
    <div class="letter">t</div> 
    <div class="letter">a</div> 
    <div class="letter">c</div> 
    <div class="letter">k</div> 
    <div class="letter">o</div> 
    <div class="letter">v</div> 
    <div class="letter">e</div> 
    <div class="letter">r</div> 
    <div class="letter">f</div> 
    <div class="letter">l</div> 
    <div class="letter">o</div> 
    <div class="letter">w</div> 
</div> 
<div class="field ui-widget"> 
    <div class="ui-widget-header ui-corner-top"> 
    Assign Rooms 
    </div> 
    <div class="ui-widget-content"> 
    <div class="field-wrapper"> 
     <input placeholder="Staff Name" type="text" /> 
     <a class="clear-button">Clear Text</a> 
    </div> 
    <div class="field-wrapper"> 
     <input placeholder="Staff Room" /> 
     <a class="clear-button">Clear Text</a> 
    </div> 
    <a class="add-button">+</a> 
    </div> 
    <div class="ui-widget-header ui-corner-bottom"> 
    Press + to addanother form field. 
    </div> 
</div> 

CSS

.ui-widget-header { 
    padding: .4em; 
    font-weight: normal; 
    margin: -1px 0; 
} 

.field-wrapper { 
    display: inline-block; 
    margin: 1em .25em; 
    position: relative; 
    z-index: 0; 
} 

.field-wrapper input { 
    z-index: 0; 
} 

.field-wrapper .small-button { 
    background: #ccc; 
    border: 0; 
    border-radius: 50%; 
    padding: 0; 
    width: 20px; 
    height: 20px; 
    position: absolute; 
    top: 4px; 
    left: 89%; 
} 

.word { 
    padding: .2em; 
} 

.letter { 
    display: inline-block; 
    border: 0; 
    border-radius: 15%; 
    background: #ccf; 
    width: 1.125em; 
    height: 1.125em; 
    text-align: center; 
} 

.letter.ui-dragging { 
    z-index: 1000; 
} 

的JavaScript

$(function() { 
    function makeDrag($el) { 
    $el.draggable({ 
     revert: true 
    }); 
    } 
    makeDrag($(".letter")); 
    $(".add-button").button(); 
    $(".clear-button").button({ 
    classes: { 
     "ui-button": "ui-corner-all small-button" 
    }, 
    icon: "ui-icon-close", 
    showLabel: false 
    }).click(function(e) { 
    var $me = $(this); 
    var $field = $me.parent().find("input"); 
    var origValue = $field.val(); 
    var $blanks = $(".letter:not(.ui-draggable)"); 
    for (var i = 0; i < origValue.length; i++) { 
     $blanks.eq(i).html(origValue[i]); 
    } 
    makeDrag($blanks); 
    $field.val(""); 
    $me.hide(); 
    }).hide(); 
    $(".field-wrapper").droppable({ 
    drop: function(e, ui) { 
     var letterValue = ui.helper.text().trim(); 
     var $field = $(this).find("input"); 
     $field.val($field.val() + letterValue); 
     ui.helper.html("&nbsp;").draggable("destroy"); 
     if ($field.val().length) { 
     $field.next("a").show(); 
     } 
     return false; 
    } 
    }); 
    $(".field-wrapper input").on("click keydown", function(e) { 
    e.preventDefault(); 
    return false; 
    }); 
}); 

工作实例：https://jsfiddle.net/Twisty/kLdcj8m1/

有许多优点和缺点，这个代码，但它基本上可以做到你在找什么。注意可拖放区域是包装器，而不是文本框元素本身。这使我认为处理起来要容易一些。更进一步，我可能会将其编码到一个在隐藏文本字段顶部创建伪文本字段的小部件。这将允许更高程度的造型和主题。