我遇到了一個問題，我不知道如何解決。 當我把旋鈕拖到圖片中時，會產生一個克隆。 在圖片的下面，一個帶有按鈕位置的表單被顯示出來。 問題是，有時這個值在這個輸入欄位中沒有被更新。
在第85行我設定了這個值。 然后在第89行和第90行，我檢查這個值是否首先在那里。 通過以下方法。 console.log(ui.position.left)。 console.log($("#dragItemPositionX[data-id=" UUID "]").val());
這里總是出現一個值，但當我查看表單時，我有時會看到輸入欄位中沒有值。 ( 作為一個測驗案例，將一個按鈕拖到圖片上幾次。有時你會看到輸入欄位中沒有任何值。
這怎么可能？
這怎么可能，我怎樣才能解決這個問題呢？
function uuid（）{
var dt = new Date().getTime() 。
var uuid = 'xxxxxxx-xxxx-4xxx-yxxx-xxxxxxxx'/span>. replace(/[xy]/g, function(c) {
var r = (dt Math. random() * 16) % 16 | 0。
dt = Math.floor（dt / 16）。
return (c == 'x' ? r : (r & 0x3 | 0x8) 。) toString（16）。
});
return uuid。
}
$(document).ready(function() {
//>創建默認旋鈕。
$('#knob').jqxKnob（{
width: 34,
高度: 34,
disabled: true,
value: 0,
min: 0,
max: 100,
startAngle: 120,
endAngle: 420,
snapToStep: true,
rotation: 'clockwise',
style: {
stroke: '#000',
strokeWidth: 1,
fill: {
color: '#fff'。
}
},
pointer: {
type: 'line'。
thickness: 4,
style: {
fill: "#00a4e1"/span>,
stroke: "#00a4e1".
},
size: '70%',
offset: '0%'.
}
});
/Drag default knob in #droppable div
$(".dragable").draggable({
containment: "#droppable"/span>,
appendTo: "#droppable",
helper: "克隆"。
});
});
//Drag&Drop默認旋鈕。
$("#droppable"/span>).droppable({
drop: function(event, ui) {
//Generate UUID[/span]。
var UUID = uuid()。
//改變類，以停止在droppable div.的克隆。
if (ui.draggable.hasClass("dragable">) {
var $item = $（ui.helper）.clone（）。
$item.removeClass("dragable") 。
$item.addClass("editable") 。
$item.attr('data-id', UID) 。
$(this).append（$item）。
$(".editable").draggable（{
containment: "#droppable"/span>,
appendTo: "#droppable",
drag: function(event, ui) {
$("#dragItemPositionX[data-id=" UID "]") 。 val（ui.position.left）。
$("#dragItemPositionY[data-id=" UID "]") 。 val(ui.position.top) 。
}
});
/Add a form & fill some values。
$("#info")。 append("< form class='pure-form knob' name=" UID " data-id=" UID "> ") 。
$("form[data-id=" UID " ] ")。 append($("#template").html();
$("form[data-id=" UID " ]")。 find（'input'）.each（function（）{
$('input').attr('data-id', UID) 。
$(this).attr('name', $(this) 。 attr('name') " []")。
});
$("#dragItemPositionX[data-id=" UID " ] ")。 val（ui.position.left）。
$("#dragItemPositionY[data-id=" UID "]") 。 val（ui.position.top）。
console.log（ui.position.left）。
console. log($("#dragItemPositionX[data-id=" UUID " ]")。 val())。
//顯示表單和活動旋鈕。
$("form.knob"/span>).hide()。
$("form[data-id=" UID " ]").show()。
$("body").find(" 。 active_knob"）.removeClass（"active_knob"）。
$(".jqx-knob[data-id=" UUID " ]")。 find("line") 。 eq(-1).addClass("active_knob") 。
}
}
})
uj5u.com熱心網友回復：
做了一些小的更新。你有幾個專案在你的jQuery塊之外。我懷疑你有一些語法問題。
測驗。https://jsfiddle.net/Twisty/acr1dvbf/5/
JavaScript
$(function(/span>) {
function uuid（） {
var dt = new Date().getTime() 。
var uuid = 'xxxxxxx-xxxx-4xxx-yxxx-xxxxxxxx'/span>. replace(/[xy]/g, function(c) {
var r = (dt Math. random() * 16) % 16 | 0。
dt = Math.floor（dt / 16）。
return (c == 'x' ? r : (r & 0x3 | 0x8) 。) toString（16）。
});
return uuid。
}
//創建默認旋鈕。
$('#knob').jqxKnob（ {
width: 34,
高度: 34,
disabled: true,
value: 0,
min: 0,
max: 100,
startAngle: 120,
endAngle: 420,
snapToStep: true,
rotation: 'clockwise',
style: {
stroke: '#000',
strokeWidth: 1,
fill: {
color: '#fff'。
}
},
pointer: {
type: 'line'。
thickness: 4,
style: {
fill: "#00a4e1"/span>,
stroke: "#00a4e1".
},
size: '70%',
offset: '0%'.
}
});
/Drag default knob in #droppable div
$(".dragable").draggable({
containment: "#droppable"/span>,
appendTo: "#droppable",
helper: "克隆"。
});
//Drag&Drop默認旋鈕。
$("#droppable").droppable({
drop: function(event, ui) {
//Generate UUID[/span]。
var UUID = uuid()。
//改變類，以停止在droppable div.的克隆。
if (ui.draggable.hasClass("dragable">) {
var $item = $（ui.helper）.clone（）。
$item.toggleClass("dragable editable") 。
$item.attr('data-id', UID) 。
$(this).append（$item）。
$(".editable").draggable（{
containment: "#droppable"/span>,
appendTo: "#droppable",
drag: function(event, ui) {
$("#dragItemPositionX[data-id=" UID "]") 。 val（ui.position.left）。
$("#dragItemPositionY[data-id=" UID "]") 。 val(ui.position.top) 。
}
});
/Add a form & fill some values。
$("#info")。 append("< form class='pure-form knob' name=" UID " data-id=" UID "> ") 。
$("form[data-id=" UID " ] ")。 append($("#template").html();
$("form[data-id=" UID " ]")。 find('input').each(function(i, el) {
$('input').attr('data-id', UID) 。
$(el).attr('name', $(this) 。 attr('name') " []")。
});
$("#dragItemPositionX[data-id=" UID " ] ")。 val（ui.position.left）。
$("#dragItemPositionY[data-id=" UID "]") 。 val（ui.position.top）。
console.log（ui.position.left）。
console. log($("#dragItemPositionX[data-id=" UUID " ]")。 val())。
//顯示表單和活動旋鈕。
$("form.knob"/span>).hide()。
$("form[data-id=" UID " ]").show()。
$(".active_knob").removeClass（"active_knob"）。
$(".jqx-knob[data-id=" UUID " ]")。 find("line") 。 eq(-1).addClass("active_knob") 。
}
}
});
});
當我移動克隆的時候，我總是能得到價值的更新。
Update
如果你添加了更多的旋鈕，那么你將需要有條件地添加旋鈕，或者如果它是一個現有的旋鈕，顯示正確的形式并顯示適當的位置。
舉例說明。https://jsfiddle.net/Twisty/acr1dvbf/95/
JavaScript
$(function(/span>) {
function getId（） {
var dt = new Date().getTime() 。
var uuid = 'xxxxxxx-xxxx-4xxx-yxxx-xxxxxxxx'/span>. replace(/[xy]/g, function(c) {
var r = (dt Math. random() * 16) % 16 | 0。
dt = Math.floor（dt / 16）。
return (c == 'x' ? r : (r & 0x3 | 0x8) 。) toString（16）。
});
return uuid。
}
function makeKnobDrag（item） {
return $(item).draggable（{
containment: "#droppable"/span>,
drag: function(event, ui) {
$("#knob-form-" $(item).data("form") " . drag-x"）.val（ui.position.left）。
$("#knob-form-" $(item).data("form") " . drag-y"）.val（ui.position.top）。
}
});
}
function getActiveKnobPosition（） {
return $(".active_knob") 。 closest(".jqx-knob").position（）。
}
function makeForm（target, uuid） {
var c = $(".active_knob").closest(" 。 jqx-knob"）.data("form")。
var form = $("<form>", {
class: "pure-form knob"。
name: uuid。
"data-id": uuid。
id: "knob-form-" c
}).appendTo（目標）。
form.append($("#template form").children().clone()。
form.find('input').each(function(i, el) {
$(el).attr({
name: $(el).attr("name") " []",
"data-id": uuid。
id: $(el).attr("id").substring(0, $（el）。 attr("id").indexOf（"-"）) c
});
});
$("form.knob").hide()。
var kPos = getActiveKnobPosition()。
$(".drag-x", form).val(kPos.left) 。
$(".drag-y", form).val(kPos.top) 。
form.show()。
}
//創建默認旋鈕。
$('#knob').jqxKnob（ {
width: 34,
高度: 34,
disabled: true,
value: 0,
min: 0,
max: 100,
startAngle: 120,
endAngle: 420,
snapToStep: true,
rotation: 'clockwise',
style: {
stroke: '#000',
strokeWidth: 1,
fill: {
color: '#fff'。
}
},
pointer: {
type: 'line'。
thickness: 4,
style: {
fill: "#00a4e1"/span>,
stroke: "#00a4e1".
},
size: '70%',
offset: '0%'.
}
});
/Drag default knob in #droppable div
$(".dragable").draggable({
containment: "#droppable"/span>,
helper: "clone",
start: function(e, ui) {
ui.helper.addClass（"new-item"）。
}
});
//Drag&Drop默認旋鈕。
$("#droppable").droppable({})
drop: function(event, ui) {
var $self = $（this）。
var UUID;
var $item = $（ui.helper）.clone（）。
$(".active_knob").removeClass("active_knob") 。
if ($item.hasClass("new-item")) {
UUID = getId();
$item.removeClass("new-item").toggleClass("dragable editable ui-draggable ui-draggable-dragging") 。
$item.attr({
"data-id"。UID,
"data-form": "knob-form-" ($("form.knob").length 1)
});
$self.append（$item）。
$item.find("line").eq(-1) 。 addClass("active_knob") 。
makeKnobDrag($item, UUID)。
makeForm("#info", UID) 。
} else {
UID = $item.data("id") 。
c = $item.data("form") 。
$("form.knob").hide() 。
$item.find("line").eq(-1) 。 addClass("active_knob") 。
$("#knob-form-" c).show()。
}
}
});
});
正如你所看到的，如果它是一個新專案，它將被添加到dropable中。如果它不是一個新專案，它將顯示適當的表單并更新位置。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/319906.html
標籤：