0
Для жизни я не могу понять, почему мои изображения иногда перетаскиваются. Похоже, когда я не могу отказаться, щелкнув изображение один раз, прежде чем начинать его перетаскивать (иногда). Я думал, что это была проблема с фокусом, поэтому я попытался использовать jQuery, чтобы сосредоточиться на div ng-drag в вызове функции drop-success. Я также продолжал менять css, и у меня есть ощущение, что это может иметь какое-то отношение к нему, но потом снова я не уверен, если его проблема с вещанием какого-либо типа. Я вообще не касался файла ngDraggable.js ...... Мобильный телефон кажется прекрасным, но на рабочем столе это очень странно и кажется прерывистым. Пожалуйста помоги. Ссылка на мой GitHub репо: https://github.com/TransientCW/BabyBox-AngularПочему ngDraggable работает только половину времени в угловом ng-повторении
HTML:
<div class="row chest" style="text-align:center;margin: 0 auto;width:95%;">
<div style="text-align:center;" class=".col-lg-1 imageChest">
<ul style="list-style:none; width:100%; text-align:center;margin:0 auto;padding:0;" class="draggable-objects" id="theList">
<li ng-repeat="image in gameCont.images track by $index"
class="item"
ng-drag="true"
ng-drag-data="image"
ng-drag-success="gameCont.onDragSuccess($data, $event, $index)"
style="height:110px;">
<img class="thumbnail"
ng-src="{{image.imgSrc}}"
width="75" height="75"/>
<span class="itemName"><h5>{{image.name}}</h5></span>
</li>
</ul>
</div>
<div class="innerChest" style="text-align:center;margin: 0 auto;width:90%;">
<span style="color:white;"><h4>Please place your 5 preferred images below</h4></span>
<div ng-drop="true"
ng-drop-success="gameCont.onDropComplete($data, $event, $index)"
style="width: 100%; height: 100%;
border:1px solid black;position:relative;bottom:21px;">
<ul style="list-style:none;">
<li ng-repeat="image in gameCont.selectedImages track by $index"
class="item">
<img class="thumbnail"
ng-src="{{image.imgSrc}}"
width="65" height="65">
</li>
</ul>
</div>
</div>
</div>
</br>
<div class="row" style="text-align:center;position:relative;bottom:95px;">
<button type="submit" class="btn btn-default" ng-click="gameCont.submitImages()">Submit</button>
<button type="submit" class="btn btn-default" ng-click="gameCont.reset()">Reset</button>
</div>
CSS:
body {
padding: 0px;
margin: 0px;
}
.item {
display:inline-block;
width: 75px;
height:75px;
margin: 15px;
vertical-align:top;
}
.headline {
color: black;
}
.row.chest {
position:relative;
background-image: url('../img/Empty-Box.png');
background-repeat: no-repeat;
background-size:contain;
background-position:center;
height: 705px;
width: 534px;
position:relative;
text-align:center;
}
.col-lg-1.imageChest {
position:absolute;
top:150px;
width: 100%;
text-align:center;
}
.innerChest {
position: absolute;
top: 480px;
left:60px;
width: 200px;
height: 120px;
padding: 5px;
text-align:center;
}
.itemName {
color:purple;
text-shadow:1px 1px 10px white;
}
*{
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
[ng-drag]{
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
[ng-drag]{
width: 100px;
height: 100px;
color:white;
text-align: center;
display: inline-block;
margin:0 10px;
cursor: move;
}
ul.draggable-objects:after{
display: block;
content:"";
clear:both;
}
.draggable-objects li{
float:left;
display: block;
width: 75px;
height:75px;
}
[ng-drag].drag-over{
border:0;
}
[ng-drag].dragging{
opacity: 0.5;
}
[ng-drop]{
text-align: center;
display: block;
margin: 20px auto;
position: relative;
width: 600px;
height: 200px;
display: block;
margin:20px auto;
position: relative;
}
[ng-drop].drag-enter{
border:0;
}
[ng-drop] span.title{
display: block;
position: absolute;
top:50%;
left:50%;
width: 200px;
height: 20px;
margin-left: -100px;
margin-top: -10px;
}
[ng-drop] div{
position: relative;
z-index: 2;
}
угловой контроллер:
/**
* Created by cdub on 9/10/2016.
*/
angular.module('gameBox', ['ngRoute', 'ngDraggable'])
.controller('gameBoxController', [
'$window',
'$location',
'imageFactory',
gbControllerFunc
]);
function gbControllerFunc($window, $location, imageFactory) {
console.log('game controller set');
var gameCont = this;
gameCont.selectedFull = false;
gameCont.imageNames = [];
gameCont.errorRefresh = imageFactory.errorRefresh;
gameCont.submitImages = imageFactory.submit;
//This is the list of selectable, draggable objects
gameCont.images = [];
loadAllFactoryImages();
//This is the empty list, which will have dragged objects pushed into it
gameCont.selectedImages = imageFactory.selectedImages;
/**
* Function for loading/reloading copy of original factory array
*/
function loadAllFactoryImages() {
for(var i = 0; i < imageFactory.images.length; i++) {
gameCont.images.push(imageFactory.images[i]);
}
}
/**
* Find the object in the array, return its index for splicing
* @param obj
* @param arr
* @returns {number}
*/
function searchImages(obj) {
console.log('looking for name: ', obj.name);
console.log('in array: ', gameCont.images);
for(var i = 0; i < gameCont.images.length; i++) {
console.log(gameCont.images[i].name);
if(gameCont.images[i].name === obj.name) {
return i;
}
}
return -1;
}
/**
* Function to send email with the images that the user selected
*/
gameCont.submitImages = function() {
console.log('images submitted');
$location.path('/success');
};
/**
* Reset all arrays and reload home view
*/
gameCont.reset = function() {
console.log('resetting');
gameCont.images = [];
loadAllFactoryImages();
gameCont.selectedImages = [];
$window.location.reload();
};
gameCont.centerAnchor = true;
gameCont.toggleCenterAnchor = function() {gameCont.centerAnchor = !gameCont.centerAnchor};
gameCont.onDropComplete=function(data,evt){
if(gameCont.selectedImages.length < 5) {
var index = searchImages(data, gameCont.images);
console.log('index returned is: ', index);
gameCont.images.splice(index, 1);
gameCont.selectedImages.push(data);
gameCont.imageNames.push(data.name);
console.log('images up top: ', gameCont.images);
} else {
console.log('selected images full');
}
angular.element('#theList').focus();
};
gameCont.onDragSuccess=function(data, evt, $index){
console.log("133","$scope","onDragSuccess", "", evt);
delete($index);
};
}
угловое изображение завода:
/**
* Created by cdub on 9/10/2016.
*/
angular.module('gameBox')
.factory('imageFactory', [
'$location',
imgFactoryFunc
]);
function imgFactoryFunc($location) {
console.log('factory loaded up');
var fact = this;
//Image object array with URL's for ng-repeat
fact.imgArray = [
{
name: 'Bib',
imgSrc: 'img/Composite/Accessory - Bib.jpg'
},
{
name: 'Hat',
imgSrc: 'img/Composite/Accessory - Hat.jpg'
},
{
name: 'Mittens',
imgSrc: 'img/Composite/Accessory - Mittens.jpg'
},
{
name: 'Socks',
imgSrc: 'img/Composite/Accessory - Socks.gif'
},
{
name: 'Toy',
imgSrc: 'img/Composite/Accessory - Toy.jpg'
},
{
name: 'Short Onesie 1',
imgSrc: 'img/Composite/Onesies - Short.jpg'
},
{
name: 'Short Onesie 2',
imgSrc: 'img/Composite/Onesies - Short 2.jpg'
},
{
name: 'Long Onesie',
imgSrc: 'img/Composite/Onesies - Long.jpg'
},
{
name: 'Booties',
imgSrc: 'img/Composite/Outerwear - Booties.jpeg'
},
{
name: 'Cardigan',
imgSrc: 'img/Composite/Outerwear - Cardigan.jpg'
},
{
name: 'Jacket',
imgSrc: 'img/Composite/Outerwear - Jacket.jpg'
},
{
name: 'Romper 1',
imgSrc: 'img/Composite/Outfits - Romper 1.jpg'
},
{
name: 'Romper2',
imgSrc: 'img/Composite/Outfits - Romper 2.jpg'
},
{
name: 'Gown',
imgSrc: 'img/Composite/Outfits - Gown.jpg'
},
{
name: 'Long Sleeve Dress',
imgSrc: 'img/Composite/Outfits - Long Sleeve Dress.jpg'
},
{
name: 'Top & Bottom 1',
imgSrc: 'img/Composite/Outfits - Top & Bottom.jpg'
},
{
name: 'Top & Bottom 2',
imgSrc: 'img/Composite/Outfits - Top & Bottom 2.jpg'
},
{
name: 'Tutu',
imgSrc: 'img/Composite/Outfits - Tutu.jpg'
},
{
name: 'Tank Dress',
imgSrc: 'img/Composite/Outfits - Tank dress.jpg'
},
{
name: 'Cotton Long Pants',
imgSrc: 'img/Composite/Pants - Cotton Long.jpg'
},
{
name: 'Denim Pants',
imgSrc: 'img/Composite/Pants - Denim.jpg'
},
{
name: 'Long Pants',
imgSrc: 'img/Composite/Pants - Long.jpg'
},
{
name: 'Short Pants',
imgSrc: 'img/Composite/Pants - Shorts.jpg'
},
{
name: 'Button Down Shirt',
imgSrc: 'img/Composite/Shirts - Button Down.png'
},
{
name: 'Graphic Tee Shirt',
imgSrc: 'img/Composite/Shirts - Graphic Tee.jpg'
},
{
name: 'Kimono Shirt',
imgSrc: 'img/Composite/Shirts - Kimono.jpg'
},
{
name: 'Polo Shirt',
imgSrc: 'img/Composite/Shirts - Polo Shirt.jpg'
},
{
name: 'Tank Shirt',
imgSrc: 'img/Composite/Shirts - Tank.jpg'
}
];
// Empty array to hold dropped image objects
fact.selectedImages = [];
return {
images : fact.imgArray,
selectedImages: fact.selectedImages,
errorRefresh: function() {
console.log('Refresh button clicked after error');
$location.path('/');
}
}
}