为什么ngDraggable在有角度的ng-repeat中只能工作一半时间

Question

对于我的一生，我无法弄清楚为什么我的图像有时只能拖动/拖放。 似乎当我无法放下时，单击图像一次，然后开始拖动即可（有时）。 我以为这是一个焦点问题，因此我尝试使用jQuery在调用drop-success函数时将焦点放在ng-drag div上。 我也一直在更改css，我感觉可能与它有关，但是再次不确定它是否存在某种广播问题。 我根本没有触摸过ngDraggable.js文件……移动设备似乎还不错，但是在桌面上这很奇怪，而且似乎是断断续续的。 请帮忙。 链接到我的github仓库： https : //github.com/TransientCW/BabyBox-Angular

的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('/');
        }
    }
}

Answer 1

不幸的是，它运行良好。 我当时正在使用触摸屏笔记本电脑，并且行为异常。 在普通笔记本电脑上，拖动功能可以正常工作，而在台式机上，它也可以正常工作.....